Reactjs 重置更新后的网站后的本地存储

在我的react应用程序中，我有12个按钮和一个长度为12的数组，数组中填充了加号：

.fill（“+”）

我有一个功能，在点击其中一个按钮后，将数组（I）更改为（“-”）

我需要将此阵列保存在localStorage中，但为此我创建了：

localStorge = localStorage.spots(spots=is my varryable in code)  = JSON.stringify(Array(12).fill("-"));

我点击我的按钮，可以更改本地存储==酷=一切正常

但在重新加载web后，我的阵列将存储在本地存储中=

JSON.stringify(Array(12).fill("-"));

这是合乎逻辑的，因为我在代码的开头编写它，但我不需要它。我需要创建本地存储
（数组（12）.fill（“-”）
在单击我的按钮并重新加载本地存储后更改它

app.js

export default class Hall extends React.Component {
   
  constructor(props) {
    super(props);
    this.state = {
      spots:JSON.parse(localStorage.spots),
    
    }
  }
  handlClick(i) {
    const spots =this.state.spots.slice();
    spots[i]="бронь";
    localStorage.spots=JSON.stringify(spots); 
    const color = this.state.color.slice();
    color[i]="danger";

   
    this.setState({
      spots:JSON.parse(localStorage.spots),
      color: color,

    });

  }

  renderSquare(i) {
    return (
    <Spot
    onClick={()=> this.handlClick(i)}
    value={this.state.spots[i]}

    />
    );
  }

  render() {

    return (

      <div className="BySpot">
          <div className="date"></div>
          <div className="inSpot">
          <div className="screen">screen</div>
          <div className="exit">exit</div>
        
        <div className="board-row1">
        board-row1
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row2">
        board-row2
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row3">
        board-row3
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
        <div className="board-row4">
        board-row4
          {this.renderSquare(9)}
          {this.renderSquare(10)}
          {this.renderSquare(11)}
        </div>
        </div>
      </div>
    );
  }
}

index.js


function Main(props) {
    localStorage.spots = JSON.stringify(Array(12).fill("своб"));
    return (
        <main className="main" >
       <Nav />
     
     <WrapMain />

        </main>

    )

};


    ReactDOM.render(
        <Main />,document.getElementById("root")
    );

导出默认类.组件{
建造师（道具）{
超级（道具）；
此.state={
spots:JSON.parse（localStorage.spots），
}
}
手舔（一）{
const spots=this.state.spots.slice（）；
斑点[i]=“ббббб”；
localStorage.spots=JSON.stringify（spots）；
const color=this.state.color.slice（）；
颜色[i]=“危险”；
这是我的国家({
spots:JSON.parse（localStorage.spots），
颜色：颜色，
});
}
renderSquare（一）{
返回(
这个.handlClick（i）}
value={this.state.spots[i]}
/>
);
}
render（）{
返回(
屏幕
出口
董事会第1行
{this.renderSquare（0）}
{this.renderSquare（1）}
{this.renderSquare（2）}
董事会第2行
{this.renderSquare（3）}
{this.renderSquare（4）}
{this.renderSquare（5）}
董事会第3行
{this.renderSquare（6）}
{this.renderSquare（7）}
{this.renderSquare（8）}
董事会第4行
{this.renderSquare（9）}
{this.renderSquare（10）}
{this.renderSquare（11）}
);
}
}
index.js
主功能（道具）{
localStorage.spots=JSON.stringify（数组（12）.fill（“Сбб”）；
返回(
)
};
ReactDOM.render(
，document.getElementById（“根”）
);
这是一个错误的语法，您不能以这种方式在localStorage中添加值。试试这个：

localStorage.setItem('spots', JSON.stringify(spots))

然后您可以从本地存储获取

const spots = localStorage.getItem('spots')

如果需要，可以解析
spots
变量

在这里，您可以阅读更多文档。