本地存储无法正常工作 ReactJS

Question

>我在表格中设置了一个数组，以便当我单击图标时，会在该特定行中重新呈现不同的图标。现在我有本地存储设置，以便在刷新页面时保持状态。我遇到的问题是，如果我单击 4 个图标，显然会重新渲染 4 个不同的图标，但是当我刷新页面时，我单击的最后一个图标会恢复到其原始状态，所以现在我只有 3 个重新渲染的图标。我该如何解决这个问题？

import React from 'react';
import StarBorder from '@material-ui/icons/StarBorder';
import Star from '@material-ui/icons/Star';
import axios from 'axios';
class Test extends React.Component {
constructor(props) {
super(props);
var newData = [];
if (localStorage.getItem('new')) {
newData =  JSON.parse(localStorage.getItem('new'));
}
this.state = {
data: newData,
}
}
componentDidMount() {
if (!localStorage.getItem('new')) {
axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=true')
.then(res => {
const data = res.data;
this.setState({  data: data.map(x => ({...x, starIcon: true})) })
})
}
}
handleClick = (i) => {
this.setState(prevState => ({
data: prevState.data.map((x, key) => (key === i ? {...x, starIcon: !x. starIcon} : x))
}));
localStorage.setItem('new', JSON.stringify(this.state.data));
}
render() {
return (
<div>
<table border="1">
<thead>
<tr>
<td>Icon</td>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody>
{this.state.data.map((n, i) => {
return (
<tr>
<td> <span onClick={() => this.handleClick(i)}> {n.starIcon ? <StarBorder/> : <Star /> } </span> </td>
<td>{n.name}</td>
<td>{n.current_price}</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
}
}
export default Test;

Answer 1

setState

是异步的，因此当您将项目设置为本地存储时，您仍然可以捕获以前的状态。要修复此问题，请使用setState的回调函数来确保在设置项目时状态已更新：

handleClick = (i) => {
this.setState(prevState => ({
data: prevState.data.map((x, key) => (key === i ? {
...x,
starIcon: !x.starIcon
} : x))
}), () => {
localStorage.setItem('new', JSON.stringify(this.state.data));
});
}

Answer 2

你将不得不更改handleClick函数，因为在setState设置其状态之前，本地存储setitem方法被这样调用。 所以你必须使用setState方法的回调函数

为什么 setState 在 reactjs 异步而不是同步中？

handleClick = (i) => {
this.setState(prevState => ({
data: prevState.data.map((x, key) => (key === i ? {
...x,
starIcon: !x.starIcon
} : x))
}), () => {
localStorage.setItem('new', JSON.stringify(this.state.data));
});
}