有人能解释为什么这适用于类组件而不适用于函数组件吗

Question

基本上，我有几个按钮。我希望用户能够选择多个按钮。

我尝试使用一个功能组件，并使用useState钩子将按钮状态存储为对象。单击按钮时，状态会相应更新，但按钮的道具不会更新。当props.isActive发生更改时，我曾尝试使用Effect重新发送组件，但没有成功。

使用类组件，可以完全按照预期工作。我只是想弄明白为什么会这样。如果有人能提供见解，我将不胜感激。谢谢。

功能组件

const View = (props) => {
var [buttons, setButtons] = useState([
{ name: "Small", isActive: false },
{ name: "Large", isActive: false },
]);
const handleClick = (index) => {
let tmp = buttons;
tmp[index].isActive = !tmp[index].isActive;
return setButtons(tmp);
};
return (
<div>
{buttons.map((e, index) => {
return (
<MyButtonComponent
key={index}
name={e.name}
isActive={e.isActive}
onClick={() => handleClick(index)}
/>
);
})}
</div>
);
};

类别组件

class View extends Component {
state = {
btn: [
{ name: "Small", isActive: false },
{ name: "Large", isActive: false },
],
};
handleClick = (index) => {
let tmp = this.state.btn;
tmp[index].isActive = !tmp[index].isActive;
return this.setState({ ...this.state, btn: tmp });
};
render() {
return (
<div>
{this.state.btn.map((e, index) => {
return (
<MyButtonComponent
key={index}
name={e.name}
isActive={e.isActive}
onClick={() => this.handleClick(index)}
/>
);
})}
</div>
);
}
}

Answer 1

您正在更改旧数组，然后使用已更改的数组设置状态。无论您使用的是类组件还是函数组件，这在react中都不是一个好主意。类组件可以让你摆脱它，但函数组件比较之前的状态和之后的状态，发现它们是同一个数组，所以它跳过渲染。

要解决此问题，您应该创建一个新状态，而不是更改旧状态。更改此项：

let tmp = buttons;
tmp[index].isActive = !tmp[index].isActive;
return setButtons(tmp);

对此：

// Create a copy of the array
let tmp = [...buttons]; 
// Also copy the item you want to change
tmp[index] = {
...tmp[index],
active: !tmp[index].active
}
setState(tmp);

Answer 2

您正在更新引用，并将相同的引用设置为状态(setButtons(tmp))，而react thinks数组由于比较浅而没有更改。你需要使用新的参考资料。像下面的

let tmp = buttons; <-- problem is here, reference 
tmp[index].isActive = !tmp[index].isActive;
return setButtons(tmp); <-- and updating same `reference`

const handleClick = (index) => {
buttons[index].isActive = !buttons[index].isActive;
return setButtons([...buttons]); <-- this will work
};