使用 reactjs 删除验证码警告

Question

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

看来以后会出问题

谢谢，

希望你理解我。

Warning: Encountered two children with the same key, u. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

SAMPLE CODE

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() 将相同，如果键不唯一，则会显示警告，

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

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

收件人：

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

使用 reactjs 删除验证码警告

Remove warning on captcha using reactjs

captcha

reactjs

antd