Question

我正在使用react做一个待办事项清单，但我无法理解该错误，请有人告诉我我做错了什么。

   constructor(props) {
   super(props);
    this.state = {
    userInput: '',
    list:[]
   }
   }
   changeUserInput = (Input) => {
   this.setState({userInput: Input});
   } 

   onButtonSubmit = (Input) => {

   let listArray = this.state.list;
   listArray.push(Input);
   this.setState({list: listArray})
   }


    render() {
    return (

   <div className="App">


    <Input 
      changeUserInput = {this.changeUserInput}
     onButtonSubmit = {this.onButtonSubmit} 
      /> 

   <ul>
   {this.state.list.map((val) => <li>{val}</li>)}
   </ul>
   </div>

 input.js

   import React from 'react';

   const Input = ({changeUserInput, onButtonSubmit}) => {
   return(
   <div>
    <p className = 'f2'>
      {'Make a shopping list by adding items'}
    </p>  
   <div>
    <input  className = 'w-70 ma2 pa2 br-pill' type = "text" 
   placeholder = "enter items" onChange={changeUserInput} />
   <div>
    <button className= 'f6 grow  br-pill ba bw1 ph3 pv2 mb2 dib black 
   pointer' onClick ={onButtonSubmit} >Add Item</button>
   </div>   
   </div>
   </div>
   );
  }
  export default Input;

警告：列表中的每个孩子都应该有一个独特的“钥匙”道具。警告：出于性能原因，此合成事件已被重用未捕获的不变违反：对象无效，不能作为React子对象

Answer 1

在React.js中，当您使用组件列表时，您需要提供key属性，以便DOM元素可以理解它们彼此之间是不同的。似乎不使用它就可以工作，但是可能会出现一些意想不到的错误。因此，使用

{this.state.list.map((val) => <li key={val.id}>{val}</li>)}

Answer 2

就像@octobus所说的foreach循环项一样，您需要标识唯一的键，如果您的val没有属性ID，则可以使用循环索引：

{this.state.list.map((val, index) => <li key={index}>{val}</li>)}

警告：列表中的每个孩子都应该有一个唯一的“关键”道具，以使待办事项列表做出反应

2 个答案: