为什么在 React 中使用 props.element 会变成 undefined？

Question

我有一个要发送到的 React 元素

<Element first={this.props.first} list1={this.state.list1} list2={this.state.list2} />

list1 和 list2 都是通过 componentDidMount() 中调用的方法设置的，因为它们是获取请求。

我正在用 list2 定义和使用 Element，这里记录的 list2 是空的。

const Element = (props) => (
      <div className='a'>
        {console.log('something' + JSON.stringify(props.list2))}
        <Link className='class' to={props.list2.find(o => o.name === props.first.name).dead === true
          ? ('/abc/' + (props.first.a ? props.first.a : '')) : ''}>
          {props.first.a ? <i>{props.first.b}</i> : 'Do'}
        </Link>

      </div>
    )

这里的输出是：

something []

然后

Uncaught TypeError: Cannot read property 'dead' of undefined

但如果我不使用 list2 的值，那么它会在日志记录中打印正确的列表。我的意思是，对于这样的代码，记录的数据是正确且非空的：

const Element = (props) => (
          <div className='a'>
            {console.log('something' + JSON.stringify(props.list2))}
            <Link className='class' to={true ? ('/abc/' + (props.first.a ? props.first.a : '')) : ''}>
              {props.first.a ? <i>{props.first.b}</i> : 'Do'}
            </Link>

          </div>
        )

这里的输出是：

something [{"name":"a", "dead":true}, {"name":"b", "dead":false}]

props.first.name 的输出是：

"a"

我不明白为什么会这样。如果有任何帮助，我将不胜感激。

Answer 1

最有可能的是，第一次呈现 Element 时，props.list2 是空的（或者至少不包含 props.exam.id 的匹配项），但随后由具有非空列表/具有匹配条目的列表的父组件。您的代码在尝试使用它的 dead 属性之前没有检查 props.list2.find 是否找到了某些东西，如果 find 没有找到任何东西，它就会爆炸（例如，因为列表是空的）。 Web 控制台中应该有关于尝试使用 undefined 的属性 dead 的错误。 find returns undefined 如果没有找到任何东西。

您需要：

更新 Element 中的逻辑以允许 props.list2.find 找不到任何东西的可能性；或
更新父元素，这样它就不会使用 props.list2.find 找不到任何内容的列表来呈现 Element（但这需要重构，因此父元素传递了什么您正在寻找 Element，而不是让 Element 尝试找到它）。

为什么在 React 中使用 props.element 会变成 undefined？

Why does props.element become undefined when I use it in React?

html

javascript

reactjs

react-props