Question

我正在使用reactjs和ant设计处理验证码。它的代码正在运行，它只是一个警告，我无法解决。

看起来将来会出现问题。

谢谢，

希望你了解我。

警告：遇到两个具有相同密钥的孩子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>
    );
  }

Answer 1

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

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

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

要：

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

使用reactjs

1 个答案: