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

我已将一个组件拆分为父元素和子元素。我正在通过states将数据从父级传递给子级，但收到一个未捕获的TypeError：无法读取null的属性“imageSource”，这是一个奇数，因为我正在执行与应用程序的另一个元素相同的过程。我也关注了组件和道具文档，但仍然有点困惑

如果我已经定义了状态，设置了状态，并将其作为属性添加到子级，为什么状态仍然为null

类父级扩展React.Component{
构造函数（）{
超级（）；
此.state={
图像源：[]，
图像标题：[]，
}
}
componentDidMount（）{
...
...
//从Dropbox API获取内容
...
...
.然后（函数（）{
那是一个州({
图像来源：来源：，
图像标题：标题，
});
});
render（）{
返回(
);
}
}
子类扩展了React.Component{
render（）{
if（！this.state.imageSource.length）
返回null；
让titles=this.state.imageTitles.map（（el，i）=>{el}
）
让images=this.state.imageSource.map（（el，i）=>
{标题[i]}
)
返回(
{图像}
);
}
}

在子系统中，您将收到作为道具（非状态）的变量

在您的情况下，此代码应该可以工作

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

if（！this.props.imageSource.length）
返回null；
让titles=this.props.imageTitles.map（（el，i）=>{el}
）
让images=this.props.imageSource.map（（el，i）=>
{标题[i]}
)

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

---

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

在您的情况下，此代码应该可以工作

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

if（！this.props.imageSource.length）
返回null；
让titles=this.props.imageTitles.map（（el，i）=>{el}
）
让images=this.props.imageSource.map（（el，i）=>
{标题[i]}
)

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

---

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

class Child extends React.Component{

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

是错误的，因为您的子组件没有状态。您没有在您的子组件中声明任何状态，您可能不应该这样做。它所具有的是从父组件传递下来的道具。这是学习反应的关键部分。您需要检查的是e> 如果（！this.props.imageSource.length）并编辑调用

this.state

并替换为

this.props

的附加代码

我注意到的另一件事是：

 that.setState({

      imageSource: sources,
      imageTitles: titles,

    });

---

为什么

that.setState（{…}）

？这很让人困惑，你真的没有理由调用它。它应该总是

this.setState（{…}）

如果您正在重新绑定

此

，您正在做一些错误的事情，因为这种情况不应该发生，并且很容易导致错误。

有两件事情非常突出。下面是这段代码：

class Child extends React.Component{

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

是错误的，因为您的子组件没有状态。您没有在您的子组件中声明任何状态，您可能不应该这样做。它所具有的是从父组件传递下来的道具。这是学习反应的关键部分。您需要检查的是e> 如果（！this.props.imageSource.length）并编辑调用

this.state

并替换为

this.props

的附加代码

我注意到的另一件事是：

 that.setState({

      imageSource: sources,
      imageTitles: titles,

    });

为什么

this.setState（{…}）

？这很令人困惑，你真的没有理由调用它。它应该总是

this.setState（{…}）

如果你对

this

进行一些重新绑定，你就做错了什么，因为不应该这样做，而且很容易导致bug