Question

我正在尝试更新状态下的单个值，这是我的状态：

state = {
    courses: [
      {
        id: 1,
        courseName: 'lenguage',
        courseType: false,
        courseHours: 10,
        courseGrade: ''
      },{
        id: 2,
        courseName: 'Math',
        courseType: true,
        courseHours: 20,
        courseGrade: ''
      },{
        id: 3,
        courseName: 'Biology',
        courseType: false,
        courseHours: 30,
        courseGrade: ''
      }
    ]
  };

我得到了要更新的值和数组内对象的索引，但是我找不到更新该值的方法... 这是我到目前为止的内容：

  updateCourseGrade(courseGrade, id){
        const index = this.state.courses.findIndex(course => (
          id === course.id
        ));



    const courses = [...this.state.courses];
    courses[index].courseGrade = courseGrade;
    this.setState({courses});
  }

我也认为尝试过此块

const course = this.state.courses[index];
this.setState({
  courses: [...this.state.courses, course.courseGrade: courseGrade]
})

任何帮助都将是惊人的 tnx！

Answer 1

理想情况下，您应该使用

this.setState((prevState) => {
// Use prevState and do the map just like someone suggested in one of the answer
 courses: prevState.map(course => course.id === id ? {...course, courseGrade } : course)
})

Answer 2

使用React状态时，使用的是不变的数据结构Immutable.js可以节省生命。

但是我们也可以在不依赖于地图和对象传播的情况下做到这一点：

this.setState({
    courses: this.state.courses.map(course => course.id === id ? { ...course, courseGrade } : course)
})

Answer 3

通常，在使用状态时，您只希望执行纯操作，因为对状态进行更改会导致混乱且难以定位的错误。

updateCourseGrade = (courseGrade, id) => {
  const course = this.state.courses.find(course => course.id === id);
  if (course) {
    const updatedCourse = { ...course, courseGrade };
    const updatedCourses = this.state.courses
      .filter(course => course.id !== id)
      .concat(updatedCourse);
    this.setState({ courses: updatedCourses });
  }
}

这可能很麻烦，但这是React本身的哲学的核心。如果您想使自己更轻松，建议您检出immer，这是一个NPM库，可以导出一个函数。我通常不建议使用第三方库作为解决方案，但我特别喜欢沉浸式。起初看起来很奇怪，但是可以通过使用一种称为Proxy（ES6中的新语言功能）的东西来工作：

updateCourseGrade = (courseGrade, id) => {
  this.setState((
    produce(draftState => {
      const index = draftState.courses.findIndex(course => (
        id === course.id
      ));
      draftState.courses[index].courseGrade = courseGrade;
    })
  ))
}

通常不需要沉浸式处理，但是在处理对象数组（尤其是嵌套对象结构）时，它可以帮助您编写效果良好的干净代码。

Answer 4

您不能更改const变量，

const courses = [...this.state.courses];
    courses[index].courseGrade = courseGrade;
    this.setState({courses});

如果您具有数组中数据的值和索引，就这样做

let state = {...this.state}

state.courses[INDEX].courseGrade = courseGrade;

this.setState({...state})

我希望它有用

反应，更新由对象数组组成的状态中的单个值

4 个答案: