Очень простое изменение состояния указанного элемента массива c в React

Question

Я пытаюсь изменить состояние только одного указанного элемента массива c из массива reviews. Как это может быть сделано? Этот код не работает:

this.setState({
  reviews[2].current: true
});

Вот полный код:

import React, { Component } from "react";
import { render } from "react-dom";

const reviewsInit = [
  {
    name: "Peter Lahm",
    current: null
  },
  {
    name: "Simon Arnold",
    current: null
  },
  {
    name: "Claire Pullen",
    current: null
  }
];

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React",
      reviews: reviewsInit
    };
  }

  change = () => {
    this.setState({
      reviews[2].current: true
    });
  };

  render() {
    return (
      <div>
        {console.log(this.state.reviews[2].current)}
        <button onClick={this.change}>click me</button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Демо: https://stackblitz.com/edit/react-tbryf5

As Вы, вероятно, можете сказать, что я новичок, чтобы реагировать! Спасибо за любую помощь здесь

Answer 1

Для некоторого контекста, React обнаруживает изменение состояния при изменении ссылки на объект состояния. Он не отслеживает глубокие изменения, происходящие в массиве или объекте.

Решение

Нам нужно создать еще одну переменную с теми же данными (в основном деструктуризацию). Измените значение, необходимое. И назначьте это состояние снова.

Для объекта

this.setState({...oldState, keyToChange: 'newValue'});

Для массива

const temp = [...oldState];
temp[index] = 'newValue';
this.setState(temp);

Надеюсь, это поможет .

Answer 2

import React, { Component } from "react";
import { render } from "react-dom";

const reviewsInit = [
{
    name: "Peter Lahm",
    current: null,
},
{
    name: "Simon Arnold",
    current: null,
},
{
    name: "Claire Pullen",
    current: null,
},
];

class App extends Component {
constructor() {
    super();
    this.state = {
        name: "React",
        reviews: reviewsInit,
    };
}

change = () => {
    const prevState = [...this.state.reviews];
    prevState[2].current = true;
    this.setState({
        reviews: prevState,
    });
};

render() {
    return (
        <div>
            {console.log(this.state.reviews[2].current)}
            <button onClick={this.change}>click me</button>
        </div>
    );
}
}

render(<App />, document.getElementById("root"));

Answer 3

Обычно состояние массива сначала копируется, а затем обновляется одно из его значений

  change = () => {
    const result = [...this.state.reviews];
    result[2].current = true;
    this.setState({reviews: result});
  };