React中特定数组项的非常简单的状态更改

Question

我试图只更改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

正如你可能知道的，我是新反应的！感谢您在这里提供的任何帮助

Answer 1

对于某些上下文，当状态对象的引用发生更改时，React会检测到状态更改。它不跟踪数组或对象中发生的深层次更改。

解决方案

我们需要制作另一个具有相同数据的变量(主要是析构函数(。更改所需的值。并再次将其分配给州。

对于对象

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

对于阵列

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

希望能有所帮助。

Answer 2

数组状态通常先复制，然后更新其值

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

Answer 3

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"));