我真的很难用 React 中的方法将状态重置回原来的状态。我当前的重置方法仅重置该值。我尝试添加等于原始状态的 const，然后将状态设置为等于原始状态，但我没有运气。
有什么建议吗？
class App extends Component {
state = {
counters: [
{ id: 1, value: 4 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 }
]
};
handleReset = () => {
const counters = this.state.counters.map(c => {
c.value = 0;
return c;
});
this.setState({ counters: counters });
};
}
您可以将初始状态保存在单独的数组中，并创建数组的副本作为初始状态，并在使用handleReset.
例子
const counters = [
{ id: 1, value: 4 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 }
];
class App extends React.Component {
state = {
counters: [...counters]
};
handleReset = () => {
this.setState({ counters: [...counters] });
};
handleClick = index => {
this.setState(prevState => {
const counters = [...prevState.counters];
counters[index] = {
...counters[index],
value: counters[index].value + 1
};
return { counters };
});
};
render() {
return (
<div>
{this.state.counters.map((counter, index) => (
<button id={counter.id} onClick={() => this.handleClick(index)}>
{counter.value}
</button>
))}
<div>
<button onClick={this.handleReset}>Reset</button>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>许多人不知道，更改keyprops是重置组件状态的一种方法。当key元素的 改变时，React 将卸载它并重新实例化该组件。
如果您的组件有一个父组件并且可以让父组件更改key您的组件。在下面的示例中，父组件的key状态为数字。单击重置按钮时，父组件增加key并重新挂载该Counter组件，从而清除所有状态。任何不同的值都key将导致组件重新安装。
class Counter extends React.Component {
state = {
counters: [
{ id: 1, value: 4 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 }
],
};
handleClick = index => {
this.setState(prevState => {
const counters = [...prevState.counters];
counters[index] = {
...counters[index],
value: counters[index].value + 1
};
return { counters };
});
};
render() {
return (
<div>
{this.state.counters.map((counter, index) => (
<button id={counter.id} onClick={() => this.handleClick(index)}>
{counter.value}
</button>
))}
<div>
<button onClick={this.props.handleReset}>Reset</button>
</div>
</div>
);
}
}
class App extends React.Component {
state = {
key: 0,
};
handleReset = () => {
this.setState(prevState => ({
key: prevState.key + 1
}));
};
render() {
return (
<div>
<Counter
key={this.state.key}
handleReset={this.handleReset}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>假设您的状态是有效的 JSON，这似乎是一个简单的解决方案：
const initialState = {...};
class ... {
this.state = JSON.parse(JSON.stringify(initialState));
reset = () => {
this.setState(JSON.parse(JSON.stringify(initialState)));
}
}
深度克隆，无需库，本机代码。