当我使用useState并将突变对象设置为state时，为什么我的react应用程序不重新渲染.但在setState的情

Question

我已经使用setState和useState编写了相同的逻辑。

在setState的情况下，它会重新呈现UI，但useState的情况并非如此。

参见沙箱

使用setState:的类组件

export default class App extends React.Component {
state = { name: "ashutosh" };
handleClick = () => {
const newObj = this.state;
newObj.name = "Nrew";
console.log(newObj === this.state);
this.setState(newObj);
};
render() {
console.log("render");
return (
<div className="App">
<h1>{JSON.stringify(this.state.name)}</h1>
<h2 onClick={this.handleClick}>
Start editing to see some magic happen!
</h2>
</div>
);
}
}

使用功能组件和useState挂钩：

export default function App() {
const [nameObj, setNameObj] = React.useState({ name: "ashutosh" });
const handleClick = () => {
const newObj = nameObj;
newObj.name = "New";
setNameObj(newObj);
};
console.log("nameObj", nameObj);
return (
<div className="App">
<h1>{JSON.stringify(nameObj.name)}</h1>
<h2 onClick={handleClick}>Start editing to see some magic happen!</h2>
</div>
);
}

Answer 1

应用程序没有重新渲染的原因是您正在更改原始状态对象，然后将该原始对象传递回setNameObj。

使用新的hooksapi，您必须确保在更新状态时创建一个新对象：

export default function App() {
const [nameObj, setNameObj] = React.useState({ name: "ashutosh" });
return (
<div className="App">
<h1>{JSON.stringify(nameObj.name)}</h1>
<h2 onClick={() => setNameObj({ name: "Nrew" })}>
Start editing to see some magic happen!
</h2>
</div>
);
}