প্রতিক্রিয়া: প্রপ পরিবর্তিত হওয়ার পরে কেন শিশু উপাদান আপডেট হয় না

Question

নিম্নলিখিত ছদ্ম-কোড উদাহরণে কেন কনটেইনার foo.bar পরিবর্তন করে যখন শিশু পুনরায় রেন্ডার করে না?

Container {
  handleEvent() {
    this.props.foo.bar = 123
  },

  render() {
    return <Child bar={this.props.foo.bar} />
}

Child {
  render() {
    return <div>{this.props.bar}</div>
  }
}

এমনকি আমি যদি forceUpdate()ধারকটিতে মানটি সংশোধন করার পরে কল করি তবে শিশু এখনও পুরানো মানটি দেখায়।

Comments

এটি কি আপনার কোড? দেখে মনে হচ্ছে এটি কোনও বৈধ প্রতিক্রিয়া কোড নয়

আমি মনে করি প্রপসের মান কনটেইনার উপাদান পরিবর্তন করা উচিত নয় পরিবর্তে সেট স্টেটের মাধ্যমে প্যারেন্ট উপাদানগুলিতে পরিবর্তন হওয়া উচিত এবং সেই রাষ্ট্রটি পাত্রে প্রপসের মানচিত্র হওয়া উচিত

— পিয়ুশ প্যাটেল

এই <চাইল্ড বার = {... এর মতো স্প্রেড অপারেটর ব্যবহার করুন। ... এই.পড়গুলি.ফু.বার} />

— সৌরভ সিং

@ অ্যাড্রিয়ান ওয়েইডম্যানস্কি এবং অন্যান্য 5 জন ব্যক্তি যারা এই প্রচার করেছেন: en.wikedia.org/wiki/Pseudocode

— ডেভিড নিউকম্ব

সিউডো-কোড শোয়ের উদাহরণ হিসাবে কোনও উপাদানটিকে জায়গায় জায়গায় পুনরায় রেন্ডার করা হলে @ পিয়ুশপ্যাটেল প্রপস আপডেট হয়। এর আর একটি উদাহরণ ব্যবহারের মতো কিছু সহ <Route exact path="/user/:email" component={ListUserMessagePage} />, একই পৃষ্ঠায় একটি লিঙ্ক একটি নতুন উদাহরণ তৈরি না করে এবং স্বাভাবিক জীবনচক্র ইভেন্টগুলি চালনা না করে প্রপস আপডেট করবে।

— ডেভিড নিউকম্ব

Answer 1

সন্তানের নামের সমান 'কী' গুণমান আপডেট করুন। উপাদানগুলি প্রতিবার মূল পরিবর্তনগুলি পুনরায় রেন্ডার করবে।

Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}

Comments

এর জন্য ধন্যবাদ. আমি রিডেক্স স্টোর ব্যবহার করছিলাম এবং আমি কোনও চাবি যোগ না করা পর্যন্ত আমার উপাদানটি পুনরায় রেন্ডার করতে পারিনি। (আমি ইউইড লাইব্রেরিটি এলোমেলো কী তৈরি করতে ব্যবহার করেছি এবং এটি কার্যকর)।

— মাইয়া

হুক ব্যবহার করে আমার শিশু কোনও বিদ্যমান অ্যারেতে স্থির করার সময় পুনরায় রেন্ডার করবে না। আমার (সম্ভবত খারাপ ধারণা) হ্যাক একযোগে একটি ডামি ঠেকনা রাজ্যের সেট এবং useEffect নির্ভরতা অ্যারের যে যোগ করার জন্য ছিল: [props.notRenderingArr, props.dummy]। যদি অ্যারের দৈর্ঘ্য সর্বদা পরিবর্তিত হয়, আপনি ব্যবহারের প্রভাব নির্ভরতা অ্যারেটিতে সেট করতে পারেন [props.notRenderingArr.length]।

— হিপনোসিস

এই আমার খুব প্রয়োজন ছিল। আমি বিস্মিত হই, কখন keyপ্রয়োজন হয়, বনাম ঠিক setState? আমার কিছু বাচ্চা রয়েছে যা পিতামাতার রাজ্যের উপর নির্ভর করে তবে তারা পুনরায় রেন্ডারটি ট্রিগার করছে না ...

— dcsan

দুর্দান্ত উত্তর। তবে কেন এই আচরণ?

— ষভ

আমি সূচিটি কী হিসাবে ব্যবহার করছিলাম তবে এটি সঠিকভাবে কাজ করছে না। এখন আমি ইউইড ব্যবহার করছি এবং এটি নিখুঁত :) @ মাইয়া

— আলী রেহমান

Answer 2

কারণ শিশুরা যদি পিতামাতার প্রপসগুলি পরিবর্তন করে তবে তারা পুনরায় রেন্ডার করে না, তবে যদি এটির রাষ্ট্র পরিবর্তন হয় :)

আপনি যা দেখছেন তা হ'ল: https://facebook.github.io/react/tips/communicate-between-comp घटक.html

এটি প্রপসের মাধ্যমে অভিভাবক থেকে সন্তানের কাছে ডেটা প্রেরণ করবে তবে সেখানে কোনও রিরেন্ডার যুক্তি নেই।

আপনাকে প্যারেন্টে কিছু রাষ্ট্র সেট করতে হবে তারপরে সন্তানের পিতামাতার পরিবর্তনের স্থিতিতে পুনরায় রেন্ডার করতে হবে। এটি সাহায্য করতে পারে। https://facebook.github.io/react/tips/expose-component-functions.html

Comments

কেন সেট স্টেটের কারণে পুনরায় রেন্ডার হবে কিন্তু জোরপূর্বক আপডেট হবে না? এছাড়াও সামান্য বন্ধ বিষয়, কিন্তু কীভাবে উপাদানগুলি আপডেট করা হয় যখন প্রপু রিডুএক্স থেকে পাস করা হয় এবং ক্রিয়াটির মাধ্যমে তার রাষ্ট্র আপডেট হয়?

— টুওমাস টোভোনেন

প্রপসগুলি আপডেট করা হয় না যদি আপনি উপাদানটি আপডেট করেন তবে আপনার পাস করা প্রপসগুলি এখনও আছে are ফ্লাক্স হ্যাঁ আরও একটি বিষয় হ্যাঁ :)

— ফ্রান্সোইস রিচার্ড

state! = প্রপস সম্পর্কে আপনার আরও পড়তে হবে। আপনি প্রপস দিয়ে আপডেট করবেন না

— ফ্রান্সোইস রিচার্ড

আপনি এটি সোর্স কোডে সরাসরি দেখতে পাচ্ছেন, এটি কেবল একই প্রক্রিয়া নয়

— ওয়েবউইম্যান

তাই কি আপনি এখানে বলেন পারেন পরিবর্তন করা হয়েছে বা আমি এটি সঠিকভাবে বুঝতে পারে না, আমি জন্য একটি প্রশ্ন প্রণালী দ্বারা তৈরী stackoverflow.com/questions/58903921/...

— ILoveReactAndNode

Answer 3

আমারও একই সমস্যা ছিল। এটি আমার সমাধান, আমি নিশ্চিত নই যে এটিই ভাল অনুশীলন, যদি না বলুন:

state = {
  value: this.props.value
};

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
    this.setState({value: this.props.value});
  }
}

ইউপিডি: এখন আপনি প্রতিক্রিয়া হুক ব্যবহার করে একই জিনিসটি করতে পারেন: (কেবলমাত্র উপাদানগুলি কোনও ফাংশন হলে)

const [value, setValue] = useState(propName);
// This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);

Comments

এটি সংজ্ঞায়িতভাবে সঠিক উত্তর, সহজতম উল্লেখ না করা

— গিলহেরেম ফেরেরিরা

আমিও এই পদ্ধতির ব্যবহার করছি।

— রাউলি

@ ভ্যানসি প্যান্টস componentDidUpdateএই ক্ষেত্রে চাইল্ড উপাদান রয়েছে।

— নিক ফ্রিস্কেল

আপনার প্রয়োজন নেই এবং কোনও শিশু উপাদানগুলিতে প্রপসগুলিকে রাজ্যে রূপান্তর করা উচিত নয়। সরাসরি প্রপস ব্যবহার করুন। ইন FunctionComponentsএটি স্বয়ংক্রিয়ভাবে শিশু উপাদান যদি সাজসরঞ্জাম পরিবর্তন আপডেট করা হবে।

— ওমেরা

এই পন্থাটি তখনও কার্যকর হয় যখন আপনার পিতা মাতা অবস্থা থেকে প্রাপ্ত শিশু উপাদানগুলিতে

— প্রপস থাকে

Answer 4

প্রতিক্রিয়া অনুসারে দর্শনের উপাদানটি তার প্রপসগুলি পরিবর্তন করতে পারে না। এগুলি পিতামাতার কাছ থেকে নেওয়া উচিত এবং তা পরিবর্তনযোগ্য হওয়া উচিত। কেবলমাত্র পিতামাতাই তার সন্তানের প্রপস পরিবর্তন করতে পারেন।

রাষ্ট্র বনাম প্রপস উপর দুর্দান্ত ব্যাখ্যা

এছাড়াও, এই থ্রেডটি পড়ুন কেন আমি রিঅ্যাক্ট.জেজে প্রপসগুলি আপডেট করতে পারি না?

Comments

এর মানে কি এই নয় যে ধারকটি রিডেক্স স্টোর থেকে প্রাপ্ত প্রপসগুলি সংশোধন করতে পারে না?

— টুওমাস তোভোনেন

পাত্রে সরাসরি স্টোর থেকে প্রপসগুলি পাওয়া যায় না, সেগুলি হুডুএক্স রাজ্যের গাছের একটি অংশ পড়ে (বিভ্রান্তিমূলক ??) সরবরাহ করে !! বিভ্রান্তি হ'ল কারণ আমরা জানি না যে মায়াবী ফাংশনটি রিঅ্যাক্ট-রিডেক্স দ্বারা সংযুক্ত connect আপনি যদি সংযুক্ত পদ্ধতির উত্স কোডটি দেখতে পান তবে মূলত এটি একটি উচ্চতর অর্ডার উপাদান তৈরি করে যা সম্পত্তি স্টোরস্টেটের সাথে একটি রাষ্ট্র এবং রেডেক্স স্টোরের সদস্যতা নিয়েছে। স্টোর স্টেটের পরিবর্তে পুরো পুনরায় রেন্ডারিং হয় এবং পরিবর্তিত প্রসগুলি পরিবর্তিত স্থিতি পড়ে পাত্রে সরবরাহ করা হয়। আশা করি এই প্রশ্নের জবাব

— সুজন ঠাকরে

ভাল ব্যাখ্যা, উচ্চতর অর্ডার উপাদান সম্পর্কে চিন্তা করা আমাকে কী ঘটছে তা বুঝতে সহায়তা করে

— Tuomas Toivonen

Answer 5

আপনি setStateফাংশন ব্যবহার করা উচিত । যদি তা না হয়, তবে আপনি কীভাবে ফোর্সআপ্টেট ব্যবহার করবেন না কেন রাষ্ট্র আপনার পরিবর্তন সংরক্ষণ করবে না save

Container {
    handleEvent= () => { // use arrow function
        //this.props.foo.bar = 123
        //You should use setState to set value like this:
        this.setState({foo: {bar: 123}});
    };

    render() {
        return <Child bar={this.state.foo.bar} />
    }
    Child {
        render() {
            return <div>{this.props.bar}</div>
        }
    }
}

আপনার কোডটি বৈধ নয় বলে মনে হচ্ছে। আমি এই কোডটি পরীক্ষা করতে পারি না।

Comments

এটা করা উচিত নয় <Child bar={this.state.foo.bar} />?

— জোশ ব্রডহর্স্ট

ঠিক। আমি উত্তর আপডেট। তবে আমি যেমন বলেছি এটি একটি বৈধ কোড নাও হতে পারে। কেবল প্রশ্ন থেকে অনুলিপি করুন।

— জেমসইন

Answer 6

কখন functionsএবং এর থেকে উপাদানগুলি তৈরি করুন useState।

const [drawerState, setDrawerState] = useState(false);

const toggleDrawer = () => {
      // attempting to trigger re-render
      setDrawerState(!drawerState);
};

এটি কাজ করে না

         <Drawer
            drawerState={drawerState}
            toggleDrawer={toggleDrawer}
         />

এটি কাজ করে (কী যুক্ত করে)

         <Drawer
            drawerState={drawerState}
            key={drawerState}
            toggleDrawer={toggleDrawer}
         />

Answer 7

নিশ্চিত হয়েছে, একটি মূল কাজ যুক্ত করছে। আমি ডক্সের মাধ্যমে চেষ্টা করেছি এবং কেন তা বোঝার জন্য।

প্রতিক্রিয়া শিশু উপাদান তৈরি করার সময় দক্ষ হতে চায়। এটি অন্য কোনও সন্তানের মতো হলে নতুন উপাদানটিকে রেন্ডার করবে না, যা পৃষ্ঠাটিকে দ্রুত লোড করে তোলে।

কী বাহিনী যুক্ত করা একটি নতুন উপাদান রেন্ডার করতে প্রতিক্রিয়া জানায়, এইভাবে নতুন উপাদানটির জন্য স্থিতি পুনরায় সেট করা।

https://reactjs.org/docs/reconciliation.html#recursing-on-children

Answer 8

সেটস্টেট ফাংশনটি ব্যবহার করুন। সুতরাং আপনি করতে পারে

       this.setState({this.state.foo.bar:123}) 

হ্যান্ডেল ইভেন্ট পদ্ধতি ভিতরে।

একবার, রাষ্ট্র আপডেট হয়ে গেলে, এটি পরিবর্তনগুলি ট্রিগার করবে এবং পুনরায় রেন্ডারটি ঘটবে।

Comments

এটি অবশ্যই এই.সেটস্টেট ({foo.barQL23}) হওয়া উচিত?

— চরিত জয়সঙ্কা

Answer 9

আপনার সম্ভবত শিশুটিকে কার্যকরী উপাদান হিসাবে তৈরি করা উচিত যদি এটি কোনও রাজ্য বজায় না রাখে এবং কেবল প্রপসগুলি রেন্ডার করে এবং তারপরে অভিভাবকের কাছ থেকে কল করে। এর বিকল্প হ'ল আপনি ফাংশনাল উপাদান (ইউজ স্টেট) দিয়ে হুক ব্যবহার করতে পারেন যা স্টেটহীন উপাদানকে পুনরায় রেন্ডার করতে পারে।

এছাড়াও আপনার প্রস্তাবগুলি পরিবর্তন করা উচিত নয় কারণ সেগুলি পরিবর্তনযোগ্য। উপাদানটির অবস্থা বজায় রাখুন।

Child = ({bar}) => (bar);

Answer 10

আমি একই সমস্যা সম্মুখীন হয়েছিল। আমার একটি Tooltipউপাদান ছিল যা showTooltipপ্রপ গ্রহণ করছিল , আমি শর্তের Parentভিত্তিতে উপাদানটির উপর আপডেট করছি if, এটি Parentউপাদানটিতে আপডেট হচ্ছে তবে Tooltipউপাদানটি রেন্ডারিং করছে না।

const Parent = () => {
   let showTooltip = false;
   if(....){ showTooltip = true; }
   return(
      <Tooltip showTooltip={showTooltip}></Tooltip>
   )
}

আমি যে ভুলটি করছিলাম তা হ'ল ঘোষণা করা showTooltip একটি হিসাবে করা।

আমি বুঝতে পারি যে আমি কী ভুল করছি আমি রেন্ডারিং কীভাবে কাজ করে তার নীতিগুলি লঙ্ঘন করছি, এটি হুক্সের সাথে প্রতিস্থাপন কাজটি করেছে।

const [showTooltip, setShowTooltip] =  React.useState<boolean>(false);

Answer 11

শিশু উপাদানগুলিতে সংযোগ পদ্ধতির মানচিত্রের স্টেটটোপপ্রসগুলিতে পরিবর্তিত প্রসেসগুলি সংজ্ঞায়িত করুন।

function mapStateToProps(state) {
  return {
    chanelList: state.messaging.chanelList,
  };
}

export default connect(mapStateToProps)(ChannelItem);

আমার ক্ষেত্রে, চ্যানেললিস্টের চ্যানেল আপডেট হয়েছে তাই আমি মানচিত্রের স্টেটটোপ্রপসে চ্যানেললিস্ট যুক্ত করেছি