Question

我正在用react.js编写我的应用，并尝试从组件（P）的子组件（C1）中获取数据，该数据是对象数组，然后再次将数据传递给另一个子组件（ C2）。但是，当我在（C2）中控制台记录到达的数据时，奇怪的是它显示数据在那里，但是当我在控制台中记录其属性时，它说它无法读取未定义的属性。代码如下：

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

Answer 1

您正在搜索的fiddle。

代码如下：

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是异步的，因此在第一次渲染时，您的数据数组为空。

Answer 2

更改您的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>
     )
}

Answer 3

尝试将回调函数绑定到父级。

在ParentComponent的构造函数中，编写以下代码：

this.myCallback = this.myCallBack.bind(this);

反应从子->父->另一个子传递数据

3 个答案: