javascript - Material Ui 列表函数返回重复值

Question

我正在尝试将添加的待办事项返回到我创建的列表中。我使用了material 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>;
  });

  return (
    <div>
      <Grid container spacing={0} justify="center" style={{ marginTop: -150 }}>
        <Grid item xs={12} md={6}>
          <Typography variant="h6" className={classes.title}>
            To do List
          </Typography>
          <div className={classes.demo}>
            <List dense={dense}>
              <Card variant="outlined">
                {generate(
                  <ListItem>
                    <ListItemText primary={listItems} />
                    <ListItemSecondaryAction>
                      <IconButton
                        edge="end"
                        aria-label="edit"
                        style={{ color: green[800] }}
                      >
                        <EditIcon />
                      </IconButton>
                      <IconButton
                        edge="end"
                        aria-label="delete"
                        style={{ color: red[800] }}
                      >
                        <DeleteIcon />
                      </IconButton>
                    </ListItemSecondaryAction>
                  </ListItem>
                )}
              </Card>
            </List>
          </div>
          <Button
            variant="text"
            color="inherit"
            style={{ background: "#d50000", width: "100%", color: "white" }}
            size="Large"
            startIcon={<ClearAllIcon />}
          >
            Clear All
          </Button>
        </Grid>
      </Grid>

      <br />
    </div>
  );
};

export default ToDoList;

Answer 1

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

• Material-UI ListItemText props API : primary 应该只为每一项接收一个元素。
• 您实际上并不需要使用Top level API React.cloneElement()，普通的map()就可以正常工作。
• 将 key="item.id" 更改为 key={item.id}
• 将按钮属性 size="Large" 更改为 size="large"

<小时/>

全部修复，看起来很正常，在线尝试一下: