Javascript React Redux-渲染时出错，因为预期的道具没有'；我还没到_Javascript_Reactjs_Redux_Render_Lifecycle

Javascript React Redux-渲染时出错，因为预期的道具没有'；我还没到

javascript reactjs redux

Javascript React Redux-渲染时出错，因为预期的道具没有'；我还没到,javascript,reactjs,redux,render,lifecycle,Javascript,Reactjs,Redux,Render,Lifecycle,在从API获取数据并将该数据置于Redux状态后，我使用mapStatetoProps中的helper函数来选择和修改部分数据，并将修改后的数据传递给props 因此，在没有渲染的情况下，我可以在console.log中看到一切正常空道具：this.props.pageContent={} 数据获取并映射到props:this.props.pageContent={pageSection:[{这里有我不想要的东西}，{}，{}…]} 选择所需的数据并将其传递给props:this.props.

在从API获取数据并将该数据置于Redux状态后，我使用

mapStatetoProps

中的helper函数来选择和修改部分数据，并将修改后的数据传递给

props

因此，在没有渲染的情况下，我可以在

console.log

中看到一切正常

空道具：

this.props.pageContent={}

数据获取并映射到props:

this.props.pageContent={pageSection:[{这里有我不想要的东西}，{}，{}…]}

选择所需的数据并将其传递给props:

this.props.pageContent={pageSection:[{card:'my data'}，{}，{}…]}

但是当我将一些

道具

传递给组件时，它会抛出一个错误，因为我试图传递的那些

道具

尚未到达

this.props

（在本例中为

card.cardTitle

）

这是我目前的代码：

class Page extends Component {
  componentWillMount() {
    this.props.fetchPageContent();
  }
  render() {
    console.log(this.props.pageContent)
        if (!this.props.pageContent.pageSection[0].card) return null;
    return (
      <div>
        <PageSection
          introSectionCardTitle={ this.props.pageContent.pageSection[0].card.cardTitle}
          introSectionCardContent={ this.props.pageContent.pageSection[0].card.cardContent}
        />
      </div>
    );
  }

类页扩展组件{
组件willmount（）{
this.props.fetchPageContent（）；
}
render（）{
console.log（this.props.pageContent）
如果（！this.props.pageContent.pageSection[0].card）返回空值；
返回(
);
}

有什么想法吗？在

返回之前

我尝试使用带有不同选项的

if

语句，但错误保持不变：

TypeError:无法读取未定义的属性“0”

如果（！this.props.pageContent.pageSection[0].card）

替换

if（！this.props.pageContent.pageSection[0].card）

与

if（this.props.pageContent&&this.props.pageContent.pageSection&&this.props.pageContent.pageSection[0].card）

因为您不确定您的道具是否有

pageContent

，也不确定

pageSection

是否存在，因为在设置道具之前

pageContent

是

未定义的

，您试图访问其中的对象，然后在数组中查找元素

请尝试以下更新的代码：

class Page extends Component {
      componentWillMount() {
        this.props.fetchPageContent();
      }
      render() {
        console.log(this.props.pageContent)
        if(this.props.pageContent && this.props.pageContent.pageSection && this.props.pageContent.pageSection[0].card)
        {
            return (
              <div>
                <PageSection
                  introSectionCardTitle={ this.props.pageContent.pageSection[0].card.cardTitle}
                  introSectionCardContent={ this.props.pageContent.pageSection[0].card.cardContent}
                />
              </div>
            );
        }
        else
        {
            return (<div></div>);
        }

      }

类页扩展组件{
组件willmount（）{
this.props.fetchPageContent（）；
}
render（）{
console.log（this.props.pageContent）
if（this.props.pageContent&&this.props.pageContent.pageSection&&this.props.pageContent.pageSection[0].card）
{
返回(
);
}
其他的
{
返回（）；
}
}