javascript - 在 setState() 之后 react 渲染删除的数组元素

Question

我遇到一个问题，在我从处于组件状态的数组中删除一个已删除的数组元素后，React 似乎正在渲染它。在 setState() 之后，渲染被触发，但显示的是删除的项目，而不是剩余的项目(参见下面的 GIF 视频)。

虽然这个组件非常简单，而且我在这个问题上花了好几个小时，但我一直没能解决这个问题。奇怪的是，newState 对象实际上包含有效的新列表，但它没有被渲染。

我真的希望有人能帮我解决这个问题!

import React from "react";
import Button from "@material-ui/core/Button";
import update from "immutability-helper";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
import * as R from "ramda";

class SessionNoteGroup extends React.Component {
  state = {
    id: this.props.id,
    notes: this.props.notes
  };

  render() {
    const { classes } = this.props;

    const { id, notes } = this.state;

    return (
      <div>
        <Grid container>
          <Grid item xs={12}>
            <TextField
              multiline
              fullWidth
              id="notes"
              name="notes"
              label="Notes"
              rows="2"
              value={notes}
              onChange={this.handleValueChange}
            />
          </Grid>
        </Grid>
        <Button variant="outlined" color="primary" onClick={this.handleDelete}>
          Delete
        </Button>
      </div>
    );
  }

  handleValueChange = event => {
    const { name, value } = event.target;
    const { id, notes } = this.state;

    let newState = {
      id: id,
      notes: value
    };

    this.setState(newState);
  };

  handleDelete = () => {
    this.props.onDelete(this.state.id);
  };
}

class SessionNotes extends React.Component {
  state = {
    notes: this.props.notes.slice(),
    deleted: []
  };

  next_id = 2;

  createNotes = () => {
    let notesList = [];
    for (let i = 0; i < this.state.notes.length; i++) {
      const { id, notes } = this.state.notes[i];
      notesList.push(
        <SessionNoteGroup
          id={id}
          notes={notes}
          onDelete={this.handleDelete}
          index={i + 1}
        />
      );
    }
    console.log(notesList);
    return notesList;
  };

  handleDelete = id => {
    const newNotes = R.filter(note => note.id !== id, this.state.notes);
    this.setState({ notes: newNotes });
  };

  handleClickAdd = async () => {
    const note = {
      id: this.next_id,
      notes: ""
    };
    this.next_id++;
    const newState = update(this.state, { notes: { $push: [note] } });
    this.setState(newState);
  };

  render() {
    return (
      <div>
        {this.createNotes()}
        <Button
          variant="outlined"
          color="primary"
          onClick={this.handleClickAdd}
        >
          Add
        </Button>
      </div>
    );
  }
}

export default SessionNotes;

Answer 1

几件事。

当你想根据上一个状态设置状态时，使用带有回调的setState，它将prevState作为参数。所以接下来的代码:

handleValueChange = event => {
    const { name, value } = event.target;
    const { id, notes } = this.state;

    let newState = {
      id: id,
      notes: value
    };

    this.setState(newState);
  };

会是这样的:

handleValueChange = event => {
    const { name, value } = event.target;
    const { id, notes } = this.state;
    this.setState(prevState => ({ id: prevState.id, notes: value}));
  };

在下面的组件中相同:

handleDelete = id => {
    const newNotes = ;
    this.setState(prevState => ({ notes: R.filter(note => note.id !== id, prevState.notes) }));
  };

在您根据先前的状态值更新状态的所有时间，依此类推。

然后当你在 React 中创建一个元素列表时，使用 key 属性:

<SessionNoteGroup
          key={id}
          id={id}
          notes={notes}
          onDelete={this.handleDelete}
          index={i + 1}
        />

React 使用它来管理项目列表的渲染