反应：未捕获的类型父母和孩子之间的错误

Question

我已经将组件拆分为父元素和子元素。我通过状态将数据从父级传递给子级，但收到未捕获的类型错误：无法读取属性'ImageSource'的空，这是奇怪的，因为我遵循与应用程序的另一个元素相同的过程。我也按照组件和道具留档，但仍然有点难倒。

如果我已经定义了状态，设置了状态，并将其作为属性添加到子级，为什么状态仍然为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

有两件事很突出。下面是一段代码：

class Child extends React.Component{

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

错误，因为您的子组件没有状态。您没有在子组件中声明任何状态，您可能不应该这样做。它所拥有的是从父组件传下来的道具。这是学习的关键部分。您想在此处检查的是如果（！this.props.imageSource.length）并编辑调用this.state并替换为this.props的附加代码。

我注意到的另一件事是：

 that.setState({

      imageSource: sources,
      imageTitles: titles,

    });

为什么that.set状态？这很令人困惑，你真的没有理由称之为。它应该总是this.setState（{...}）如果您正在对this进行一些重新绑定，您就做错了，因为这种情况不应该发生，而且很容易导致错误。

Answer 2

在子元素中，您将收到作为道具的变量（而不是状态）。

在你的情况下这个代码应该工作

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

看看这个问题，我想它会帮助你理解不同之处。

在React中，状态和道具有什么区别？