Question

从API中获取数据并将数据置于Redux状态后，我在mapStatetoProps中使用辅助函数来选择和修改部分数据并将其修改为{{1} }}

因此，如果没有渲染，我可以在props中看到一切都按预期进行。

空道具：console.log
数据提取并映射到道具：this.props.pageContent = {}
我想要选择并传递给道具的数据：this.props.pageContent = { pageSection: [{something here that I don't want}, {}, {}...] }

但是当我将一些this.props.pageContent = { pageSection: [{card: 'my Data'}, {}, {}...] }传递给某个组件时，它会抛出一个错误，因为我试图传递的那些props尚未到达props（在这种情况下{ {1}}）

到目前为止，这是我的代码：

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> ); }语句，但错误保持不变： return

Answer 1

您在此处遇到问题if (!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是undefined而你是尝试访问其中的对象，然后在数组中找到元素

请尝试以下更新代码：

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

      }

React Redux - 渲染时出错，因为期待尚未到达的道具

1 个答案: