javascript - REACTJS 中的警告 : flattenChildren(. ..) : Encountered two children with the same key, `false`

Question

我正在尝试创建一个列表并使其可点击，以便一旦我点击某个项目，我就会重定向到另一个页面

这是渲染方法

 render() {
const quesItems = this.state.questions.map((question, i) => {
  return (
    <li key={this.props.account.id === question.expID}>
      <a href={`/ans/${question.id}`}> {question.description}</a>
    </li>
  );
});
return (
  <div>
    <h1> Answer the questions here!</h1>
    <ul>
      {quesItems}
    </ul>
  </div>
);

}

但是，当我单击列表中的任何项目时，我收到以下警告。我该如何修复它？

index.js:2177 Warning: flattenChildren(...): Encountered two children with the same key, `false`. Child keys must be unique; when two children share a key, only the first child will be used.

Answer 1

表达式this.props.account.id === Question.expID返回一个 bool 值。 key 属性通常不应是 bool 值(只有两个不同的值)。可能 quesItems 包含多个 expID 不等于 this.props.account.id 的项目。所有这些都将使用 key={false} 进行渲染，这是不允许的。 key prop 的正确值可能就是问题 id;

编辑:根据@Colin的建议，我添加了过滤逻辑。另请参阅Array.prototype.filter() .

render() {
    const questions = this.state.questions.filter(question => question.expID === this.props.account.id)

    return (
        <div>
            <h1>Answer the questions here!</h1>
            <ul>
                {questions.map(({id, description}) => (
                    <li key={id}>
                        <a href={`/ans/${id}`}>{description}</a>
                    </li>
                ))}
            </ul>
        </div>
    );
}