代码之家 › 专栏 › 技术社区 › JC Garcia

React Redux-渲染时出错,因为需要尚未到达的道具

lifecycle render redux reactjs javascript

JC Garcia · 技术社区 · 7 年前

在从API获取数据并将其置于Redux状态后,我在中使用了一个helper函数 mapStatetoProps 选择和修改该数据的一部分,并将其传递给 props .

因此,如果没有渲染,我可以在 console.log 一切顺其自然。

空道具: this.props.pageContent = {}
数据获取并映射到道具: this.props.pageContent = { pageSection: [{something here that I don't want}, {}, {}...] }
我想要的数据被选中并传递给道具: 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>
    );
  }

有什么想法吗? 在 return 我试着 if 语句具有不同的选项,但错误保持不变: TypeError: Cannot read property '0' of undefined

1 回复 | 直到 7 年前

Amr Labib 7 年前

你这里有问题 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 存在,因为在设置道具之前 页面内容 是 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>);
        }

      }

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前