如何解决问题与React更新状态(使用useState / setState)正确，但没有重新渲染组件?

Question

下面的代码演示了一个我无法解决的React问题。

点击"更新状态"按钮;通过将当前状态(包含3个字符串的数组)替换为更新后的数组(包含4个字符串)来触发state的更新。

strings和state作为控制台被正确更新。日志显示。然而，React组件不会被重新呈现(第4段带有"String "未显示)。我怎么做才能确保在用setState更新组件的state之后立即进行重新渲染?我认为使用useState钩子的setState函数应该总是触发重新渲染过程。

const { useState } = require('react');
let strings = [
"String A",
"String B",
"String C"
]
const TestComponent = () => {
const [ state, setState] = useState(strings);
const click = () => {
strings.push("String D");
console.log(strings);
setState(strings, console.log(state));
}

return (
<div>
{ state.map( (item) => <p>{item}</p>) }
<button onClick={click}>Update State</button>
</div>
)
};
export default TestComponent;

Answer 1

React是关于不可变性的，所以你必须避免改变数组，而是完全替换它:

const click = () => {
const copy = [...strings]; //create a copy
copy.push("String D");
console.log(copy);
setState(copy, console.log(state));
}

另一种语法是:

const click = () => {
const copy = [...strings, "String D"];
console.log(copy);
setState(copy, console.log(state));
}

Answer 2

试试这个

const click = () => {
setState([...strings, "String D"]);
}