警告:flattenChildren(...):遇到两个具有相同键的子项,REACTJS中的`false`

时间:2018-04-19 21:55:08

标签: javascript reactjs warnings render

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

这是渲染方法

 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.

1 个答案:

答案 0 :(得分:1)

表达式this.props.account.id === question.expID返回一个布尔值。 key道具通常不应该是布尔值(只有两个不同的值)。可能quesItems包含expID不等于this.props.account.id的多个项目。所有这些都将使用key={false}呈现,这是不允许的。关键道具的正确值可能只是问题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>
    );
}