材质 UI 列表函数返回重复值

Question

我正在尝试将添加的待办事项返回到我创建的列表中。我已经使用材料 ui 库来创建列表。我能够将新添加的待办事项返回到列表中，但它会再次生成整个数组，而不仅仅是添加的特定值。我已经添加了我在 app.js 中使用的代码，listlayout.js 是呈现新添加的待办事项的页面。表单还有另一个组件，我没有添加该代码，因为它对于这个特定问题并不重要应用程序.jsclass App extends Component {  constructor(props) {    super(props);    this.state = {      items: [],      newItem: {        id: "",        itemText: ""      }    };    this.handleInput = this.handleInput.bind(this);    this.addItem = this.addItem.bind(this);  }  handleInput = e => {    this.setState({      newItem: {        id: 1 + Math.random(),        itemText: e.target.value      }    });  };  addItem = e => {    e.preventDefault();    const typedItem = this.state.newItem;    if (typedItem.text !== "") {      const typedItems = [...this.state.items, typedItem];      this.setState({        items: typedItems,        newItem: {          id: "",          items: ""        }      });    }  };  render() {    return (      <div>        <HeaderBar />        <InputForm          newItem={this.state.newItem.itemText}          addItem={this.addItem}          handleInput={this.handleInput}        />        <ListLayout items={this.state.items} />      </div>    );  }}export default App;ListLayout.jsconst ToDoList = props => {  const classes = useStyles();  const [dense] = React.useState(false);  const items = props.items;  function generate(element) {    return items.map(value =>      React.cloneElement(element, {        key: value      })    );  }  const listItems = items.map(item => {    return <div key="item.id">{item.itemText}</div>;  });

Answer 1

您的代码中有多个注意点：

• Material-UI ListItemText props API：primary每个项目应该只接收一个元素。

• 您真的不需要使用顶级 API React.cloneElement()，正常map()情况下可以正常工作。

• 更改key="item.id"为key={item.id}

• 将Button 道具更改size="Large"为size="large"

•