javascript - react : Uncaught TypeError between parent and child

Question

我已将组件拆分为父元素和子元素。我通过状态将数据从父级传递给子级，但收到 Uncaught TypeError: Cannot read property 'imageSource' of null 这很奇怪，因为我遵循与另一个元素相同的过程应用。我也遵循了组件和 Prop 文档，但仍然有点难过。

如果我已经定义了状态，设置它，并将它作为属性添加到 child ，为什么状态仍然是null？

class Parent extends React.Component {

 constructor(){
   super();
   this.state = {
     imageSource: [],
     imageTitles: [],
   }
 }

 componentDidMount(){

 ...
 ...
 // grabbing stuff from Dropbox API
 ...
 ...

  .then(function(){
    that.setState({

      imageSource: sources,
      imageTitles: titles,

    });
   });



 render(){
   return(
      <Child imageSource={this.state.imageSource} imageTitles=
      {this.state.imageTitles} />
   );
 }
}



class Child extends React.Component{

 render(){
    if(!this.state.imageSource.length)
      return null;

      let titles = this.state.imageTitles.map((el, i) => <p>{el}</p>)

      let images = this.state.imageSource.map((el, i) =>

        <div className="imageContainer">
           <img key={i} className='images' src={el}/>
           <div className="imageTitle">{titles[i]}</div>
        </div>
       )

    return (
      <div className="ChildWrapper">
         {images}
      </div>
    );
  }
}

Answer 1

在 child 中，您将收到变量作为 Prop (而不是状态)。

在您的情况下，此代码应该有效

if(!this.props.imageSource.length)
  return null;

  let titles = this.props.imageTitles.map((el, i) => <p>{el}</p>)

  let images = this.props.imageSource.map((el, i) =>

    <div className="imageContainer">
       <img key={i} className='images' src={el}/>
       <div className="imageTitle">{titles[i]}</div>
    </div>
   )

看看这个问题，我认为它会帮助你理解差异。

What is the difference between state and props in React?