bugfix> javascript > 投稿

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>
           )
    }

回答 3 件
  • このフィドルはあなたが探しているものです。

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

    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);
    
    

あなたの答え