使用 reactjs 删除验证码上的警告答案

【问题标题】：Remove warning on captcha using reactjs使用 reactjs 删除验证码上的警告
【发布时间】：2018-05-16 09:26:58
【问题描述】：

我正在使用 reactjs 和 ant design 制作验证码。它的代码正在运行，只是有一个我无法解决的警告。

看来以后会出问题。

谢谢，

希望你能理解我。

警告：遇到两个孩子使用相同的密钥，u。钥匙应该是唯一的，以便组件在更新期间保持其身份。非唯一键可能会导致子项重复和/或省略 — 该行为不受支持，可能会在未来版本中更改。

let numbers = [];
function NumberList() {
  var rand = Math.random()
    .toString(36)
    .substr(2, 4);
  var a = rand.split("").join(",");
  var array = a.split(",");
  numbers = array;
  const listItems = numbers.map(number => (
    <div key={number.toString()}>{number}</div>
  ));
  return <div className="randomChars">{listItems}</div>;
}

// Captcha.
class Captcha extends Component {
  componentDidMount() {
    this.props.onRef(this);
  }
  componentWillUnmount() {
    this.props.onRef(undefined);
  }

  fetchCaptcha() {
    let concatNumbers = numbers.join("");
    return concatNumbers;
  }
  render() {
    return (
      <div className="Captcha" ref="childref">
        <NumberList />
      </div>
    );
  }

【问题讨论】：

标签： reactjs captcha antd

【解决方案1】：

如果任何字符相同，number.toString() 将相同，并且如果键不是唯一的，则会显示警告，

确保键唯一的另一种方法是在map 函数中传递index，因此进行更改：

const listItems = numbers.map(number => (
    <div key={number.toString()}>{number}</div>
));

收件人：

const listItems = numbers.map((number, index) => (
    <div key={index}>{number}</div>
));

【讨论】：