时间戳

首页 > 解决方案 > 状态似乎没有正确更新

javascript - 状态似乎没有正确更新

问题描述

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

这是我的代码：

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>
                );
            }
        }

提前感谢您的宝贵时间！四月

标签： javascriptreactjs

解决方案

对于 React 应用程序中发生变化的任何数据，并且您在每个 Movie 组件中重复导致应用程序状态不一致，都应该有一个单一的“事实来源” 。appState

你应该做的是提升国家。换句话说，将该状态和clickedTitle函数移动到它们的父组件并clickedTitle作为道具传递给电影组件。（或者你可以使用Context）

更多关于提升状态

推荐阅读