ReactJS出现flattenChildren重复key警告，求解决可跳转列表问题

这个警告的根源很明确：你给<li>设置的key是一个布尔值（this.props.account.id === question.expID的结果要么是true要么是false），当多个列表项满足相同的判断条件时，就会出现重复的key——而React要求列表里的每个子元素必须有唯一且稳定的key值，这样它才能准确追踪每个列表项的状态和变化。

最直接的解决方案 #

用每个question对象独有的标识作为key，比如你的数据里的question.id（这也是React官方推荐的做法），修改后的代码如下：

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

如果需要保留布尔判断的关联（比如用于样式区分） #

要是你原本想用这个布尔值做一些逻辑（比如给匹配的项加样式），可以把question.id和布尔值组合成唯一的key：

<li key={`${question.id}-${this.props.account.id === question.expID}`}>

这样既保留了你的判断逻辑，又能保证每个key都是独一无二的，彻底解决重复key的警告。

内容的提问来源于stack exchange，提问作者M.A.G