Javascript 状态似乎没有正确更新

我想把我看过的星球大战电影列一个单子。我希望能够检查和取消检查我单击的内容，并将其保存在localStorage中。 出于某种原因，有时，如果我一次浏览多部电影，在刷新页面后，只有最后一部电影仍然被浏览。我试图用我的控制台进行调试，我发现问题出在我的状态上。有时，单击多个元素后，其中一些元素将保持为false，而不是变为true

这是我的代码：

import React from 'react';
export default class Movie extends React.Component{
    constructor(props){
        super()
        this.state = (localStorage.appState) ? JSON.parse(localStorage.appState)
        : { 0: false, 1: false, 2: false, 3: false, 4: false, 5: false};
    }

    clickedTitle = (event) => {
        if (event.target.tagName === "SPAN") {
            this.setState({
                [event.target.id]: !this.state[event.target.id]
            }, () => {
                localStorage.setItem('appState',JSON.stringify(this.state))
            });
                // localStorage.clear()

            }
        }
        render(){

            return(
                <div className="sw_title"  onClick={this.clickedTitle}>
                <span id={this.props.index} className={`${this.state[this.props.index] ? "clicked" : "not-clicked"}`}> {this.props.title} </span>
                </div>
                );
            }
        }

从“React”导入React；
导出默认类Movie extensed React.Component{
建造师（道具）{
超级（）
this.state=（localStorage.appState）？JSON.parse（localStorage.appState）
：{0:false，1:false，2:false，3:false，4:false，5:false}；
}
单击标题=（事件）=>{
如果（event.target.tagName==“SPAN”）{
这是我的国家({
[event.target.id]：！this.state[event.target.id]
}, () => {
localStorage.setItem（'appState'，JSON.stringify（this.state））
});
//localStorage.clear（）
}
}
render（）{
返回(
{this.props.title}
);
}
}

提前感谢您宝贵的时间！

---

四月

据我所知，你在每一个单一的电影元素上都是这样做的。每次将同一localStorage项设置为单个电影的新值时（作为给定电影组件的状态，只保留一个实例的值）。更好的做法是将国家管理置于电影组成部分之外，比如在电影中，并且只在电影中做表象工作

import React from 'react';

export default class MovieS extends React.Component{
    constructor(props){
      super(props)
      this.state = (localStorage.appState) ? JSON.parse(localStorage.appState)
      : { 0: false, 1: false, 2: false, 3: false, 4: false, 5: false};
    }

    clickedTitle = (event) => {
      if (event.target.tagName === "SPAN") {
      this.setState({
          [event.target.id]: !this.state[event.target.id]}, () => {localStorage.setItem('appState', JSON.stringify(this.state))
      });
          // localStorage.clear()

      }
    }

    render(){
        this.props.movies.map( (movie) => (

            <Movie 
            click={clickedTitle}
            className={this.state[movie.id] ? "clicked" : "not-clicked"}
            title={movie.title}
            />

        ))

    }

}

function Movie({ click, className, title }) => (
  <div className="sw_title"  onClick={click}>
    <span id={this.props.index} className={}> {} </span>
  </div>
)

从“React”导入React；
导出默认类。组件{
建造师（道具）{
超级（道具）
this.state=（localStorage.appState）？JSON.parse（localStorage.appState）
：{0:false，1:false，2:false，3:false，4:false，5:false}；
}
单击标题=（事件）=>{
如果（event.target.tagName==“SPAN”）{
这是我的国家({
[event.target.id]：！this.state[event.target.id]}，（）=>{localStorage.setItem（'appState'，JSON.stringify（this.state））
});
//localStorage.clear（）
}
}
render（）{
this.props.movies.map（（movie）=>(
))
}
}
功能电影（{点击，类名，标题}）=>(
{} 
)

对于React应用程序中更改的任何数据，都应该有一个单一的“真相来源”，并且您在每个电影组件中重复

appState

，这会导致应用程序状态不一致

你应该做的是提升国家。换句话说，将该状态和

clickedtille

功能移动到其父组件，并将

clickedtille

作为道具传递到电影组件。（或者你可以使用）

更多关于