子->親->別の子からのデータの受け渡しに反応する

bugfix> javascript > 投稿 2020-08-25 14:48

react.jsを使用してアプリを作成し、コンポーネント（P）の子コンポーネント（C1）からオブジェクトの配列であるデータを取得し、データを別の子コンポーネント（C2）に再度渡そうとしています。ただし、到着したデータを（C2）でコンソールログに記録すると、データがあることを示すのは奇妙ですが、コンソールでそのプロパティをログに記録すると、undefinedのプロパティを読み取れないと表示されます。コードは次のとおりです。

class ParentComponent extends Component {
      constructor(props) {
           super(props)
           this.state = {
               photos: []
             }
        }
     myCallback = dataFromChild1 => {
         this.setState({
              photos: dataFromChild1
          })
      render(){
           const { photos } = this.state;
           return (
                 <main>
                    <Child1 callbackFromParent={this.myCallback} />
                    <Child2 photos={photos} />
                 </main>
            )
   }

   class Child1 extends Component {
        constructor(props) {
             super(props)
          }
       componentDidMount() {
            const photos = [{width: '100px'}, {width: '150px'}];
            this.props.callbackFromParent(photos);
         }
       render() {
            return (
                  <main>
                    ...
                  </main>
             )
       }
   }

    function Child2(props) {
          const photos = props.photos;
          console.log(photos)     // > [{..},{..}]
          console.log(photos[0].width)  // > cannot read property 'width' of undefined
          return (
                 <main>
                  ...
                 </main>
           )
    }

コードは次のとおりです。

class ParentComponent extends React.Component {
  constructor(props) {
       super(props);
       this.state = {
           photos: []
         }
    }
  myCallback = dataFromChild1 =>{
     this.setState({
          photos: dataFromChild1
      });
  };
  render() {
       const { photos } = this.state;
       return (
             <main>
                <Child1 callbackFromParent={this.myCallback}/>
                <Child2 photos={photos} />
             </main>
        );
   }
   }

   class Child1 extends React.Component {
        constructor(props) {
             super(props)
          }
       componentDidMount() {
            const photos = [{width: '100px'}, {width: '150px'}];
            this.props.callbackFromParent(photos);
         }
       render() {
            return (
                  <main>
                    ...
                  </main>
             )
       }
   }

    function Child2(props) {
          const photos = props.photos;
          console.log(photos)     // > [{..},{..}]
          console.log(photos[0] ? photos[0].width : undefined)  // > cannot read property 'width' of undefined
          return (
                 <main>
                  ...
                 </main>
           )
    }
ReactDOM.render(
  <ParentComponent name="World" />,
  document.getElementById('container')
);

setStateは非同期であるため、最初のレンダリングではデータ配列は空です。

Child2関数を変更してテストします。コードが役に立つことを願っています

function Child2(props) {
    const photos = props.photos; 
    console.log(photos)     // > [{..},{..}]
    if(photos.length){
        console.log(photos[0].width)
    } 
    return (
           <main>
               <p>Or you can use as the following </p>
               <p>{photos.length? photos[0].width : '' }</p>
           </main>
     )
}

コールバック関数を親にバインドしてみてください。

ParentComponentのコンストラクターで次のように記述します。
```
this.myCallback = this.myCallBack.bind(this);
```

bugfix

子->親->別の子からのデータの受け渡しに反応する

javascript

ajax

reactjs

関連記事