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返回一个布尔值。 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>
    );
}

警告：flattenChildren（...）：遇到两个具有相同键的子项，REACTJS中的`false`

1 个答案: