Question

我已将组件拆分为父元素和子元素。我通过状态将数据从父级传递给子级但接收到 Uncaught TypeError：无法读取属性＆＃39; imageSource＆＃39; null 这是奇怪的，因为我跟随应用程序的另一个元素执行相同的过程。我也遵循了组件和道具文档，但仍然有点难过。

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

在孩子中，你会收到变量作为道具（不是状态）。

在您的情况下，此代码应该可以使用

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?

Answer 2

一切都很突出。这段代码在这里：

class Child extends React.Component{

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

错误是因为您的子组件无状态。您没有在Child组件中声明任何状态，您可能不应该这样做。它具有的是来自Parent组件的道具。这是学习反应的关键部分。您要在此处查看的内容为if(!this.props.imageSource.length)，并修改调用this.state并替换为this.props的其他代码。

我注意到的另一件事是：

 that.setState({

      imageSource: sources,
      imageTitles: titles,

    });

为什么that.setState({...})？那令人困惑，你真的没有理由打电话给它。它应该始终是this.setState({...})如果您正在对this进行一些重新绑定，那么您做错了，因为情况不应该如此，并且可能很容易导致错误。

React：父和子之间未捕获的TypeError

2 个答案: