সন্তানের উপাদানগুলি পিতামাতার রাজ্য পরিবর্তনের পরে আপডেট হচ্ছে না এমন প্রতিক্রিয়া জানান

Question 1

আমি বিভিন্ন শিশু উপাদানগুলিতে ডেটা পপুলেশন করার জন্য একটি দুর্দান্ত এপিওয়্যার্পার উপাদান তৈরি করার চেষ্টা করছি। আমি যা পড়েছি তার থেকে এই কাজ করা উচিত: https://jsfiddle.net/vinniejames/m1mesp6z/1/

class ApiWrapper extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      response: {
        "title": 'nothing fetched yet'
      }
    };
  }

  componentDidMount() {
    this._makeApiCall(this.props.endpoint);
  }

  _makeApiCall(endpoint) {
    fetch(endpoint).then(function(response) {
      this.setState({
        response: response
      });
    }.bind(this))
  }

  render() {
    return <Child data = {
      this.state.response
    }
    />;
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data
    };
  }

  render() {
    console.log(this.state.data, 'new data');
    return ( < span > {
      this.state.data.title
    } < /span>);
  };
}

var element = < ApiWrapper endpoint = "https://jsonplaceholder.typicode.com/posts/1" / > ;

ReactDOM.render(
  element,
  document.getElementById('container')
);

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

আমি কি এখানে কিছু মিস করছি?

Question 2

আপনার কোড নিয়ে দুটি সমস্যা আছে।

আপনার সন্তানের উপাদানটির প্রাথমিক অবস্থা প্রপস থেকে সেট করা আছে।

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

এই এসও থেকে উদ্ধৃতি দেওয়া উত্তর :

একটি উপাদান হিসাবে অন্তর্নিহিত অবস্থা অতিক্রম propকরা একটি অ্যান্টি-প্যাটার্ন কারণ getInitialState(আমাদের ক্ষেত্রে কনডাক্টর) পদ্ধতিটি কেবলমাত্র প্রথম বারটিকে রেন্ডার বলে। আর কখনও না। এর অর্থ হ'ল, যদি আপনি সেই উপাদানটিকে একটি হিসাবে আলাদা মানটি পাস করে পুনরায় রেন্ডার করেন propতবে উপাদানটি সেই অনুযায়ী প্রতিক্রিয়া জানাবে না, কারণ উপাদানটি প্রথম বার যখন রেন্ডার হয়েছিল তখন থেকে রাজ্যটিকে রক্ষা করবে। এটি খুব ত্রুটিযুক্ত

সুতরাং আপনি যদি এমন পরিস্থিতি এড়াতে না পারেন তবে আদর্শ সমাধানটি হ'ল componentWillReceivePropsনতুন প্রপস শোনার পদ্ধতিটি ব্যবহার করা ।

আপনার সন্তানের উপাদানগুলিতে নীচের কোডটি যুক্ত করা আপনার চাইল্ড উপাদান পুনরায় রেন্ডারিংয়ের সাথে আপনার সমস্যার সমাধান করবে।

componentWillReceiveProps(nextProps) {
  this.setState({ data: nextProps.data });  
}

দ্বিতীয় ইস্যুটি নিয়ে fetch।

_makeApiCall(endpoint) {
  fetch(endpoint)
    .then((response) => response.json())   // ----> you missed this part
    .then((response) => this.setState({ response }));
}

এবং এখানে একটি কার্যক্ষম ফিডল: https://jsfiddle.net/o8b04mLy/

Question 3

আপনার কিছু পরিবর্তন করতে হবে।

যখন fetchপ্রতিক্রিয়াটি পান, এটি কোনও জসন নয়। আমি কীভাবে এই জসন পেতে পারি তা সন্ধান করছিলাম এবং আমি এই লিঙ্কটি আবিষ্কার করেছি ।

অন্যদিকে, আপনাকে ভাবতে হবে যে constructorফাংশনটি কেবল একবার ডাকা হয়।

সুতরাং, আপনাকে <Child>উপাদানটির যে উপায়ে তথ্য পুনরুদ্ধার করবেন সেভাবে আপনার পরিবর্তন করতে হবে ।

এখানে, আমি একটি উদাহরণ কোড রেখেছি: https://jsfiddle.net/emq1ztqj/

আমি আশা করি এটি সাহায্য করবে.