React - 子供の状態を設定しますか？

Question

私はReactsを新しくしました。私は多くの投稿を読んで、私は私の問題の解決策を見つけることができません。

私はいくつかのコンポーネントを持っています。 1つはAjaxリクエストが呼び出されて値を取得するギャラリーです。もう1つのコンポーネントはInnerContentです。そのギャラリーの子コンポーネントです。

私の質問（InnerContent）では、子コンポーネントで州を小道具として設定するのが正しいですか？

これは私の入力データである：ここで

[ 
     { 
     "collection": 1, 
     "article": 1, 
     "name": "Gallery 2", 
     "images": [{ 
      "id": 2, 
      "name": "aaa", 
      "src": "http://via.placeholder.com/200x200" 
      }, 
      { 
      "id": 3, 
      "name": "bbb", 
      "src": "http://via.placeholder.com/200x200" 
      } 
     ] 
     } 
    ] 

は私のコードです：

class InnerContent extends Component { 
    constructor(props){ 
    super(props); 

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

removeImage() { 
    /*change state in this Component*/ 
} 

    render() { 
    return (
     <div> 
     <div>Gallery name: {this.props.data.name}</div> 
     <GalleryImageContent> 
      <SortableItem removeImage={this.removeImage} {...this.state} /> 
     </GalleryImageContent> 
     </div> 
    ); 
    } 
} 

function Content(props) { 
    let rows = []; 

    props.data.forEach((data) => { 
    rows.push(<InnerContent data={data}/>) 
    }); 

    return (
    <div> 
     {rows} 
    </div> 
); 
} 

class Foo extends Component { 
    constructor(props){ 
    super(props); 

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

    render() { 
    return(
     <div> 
     <button onClick={/*change state*/}>Add Gallery</button> 
     <Content data={this.state.data}/> 
     </div> 
    ); 
    } 
} 

Answer 1

子コンポーネントで小道具としての状態を設定しても大丈夫です。

あなたのケースでは、もう1つの状態を気にする必要があります。状態をconstructorに設定していますが、コンポーネントが2回目にレンダリングされ、propsが変更された場合、状態はconstructorと同じままです。

基本的には、コンポーネントのstateを常に最新の状態に保つ必要があります。あなたはこれを解決するためにcomponentWillReceiveProps(nextProps)関数を使うことができます。

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

それはあなたの問題を解決するかどうか私に教えてください。