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

Question

我正在尝试将添加的待办事项返回到我创建的列表中。我已经使用材料 ui 库来创建列表。我能够将新添加的待办事项返回到列表中，但它会再次生成整个数组，而不仅仅是添加的特定值。

我已经添加了我在 app.js 中使用的代码，listlayout.js 是呈现新添加的待办事项的页面。表单还有另一个组件，我没有添加该代码，因为它对于这个特定问题并不重要

应用程序.js

class 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.js

const 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&nbsp;ListItemText&nbsp;props API：primary每个项目应该只接收一个元素。您真的不需要使用顶级 API&nbsp;React.cloneElement()，正常map()情况下可以正常工作。更改key="item.id"为key={item.id}将Button 道具更改size="Large"为size="large"