我想根据 localStorage 更改更新我的 Test.js 组件

Question

if条件先运行失败。
因此，一旦加载了组件，它就会显示“与学生进度相关的统计信息”，并且一旦设置了主题链接（在其他一些组件中删除得过于正确），它就会显示第二个显示。 到目前为止一切正常，但是当主题链接被删除时，如果条件无法首先运行并且仍然显示第二个显示。基本上我想根据是否存在主题链接来更改我的组件视图。

import React, { Component } from "react";
import {connect} from 'react-redux';

import {getQuestionsList} from '../../store/actions/questionActions';

class Test extends Component {

    render(){            
        let display;
        let topicLink = localStorage.getItem('topic-link');

        if(!topicLink){
            display = 
                <div style={{textAlign:'center',
                            fontSize:'22px'}}>
                    <p>Student Progress related Stats</p>
                </div>
        }
        else if(topicLink){
            display = 
                this.props.questions.map(question => (
                    <div key={question.id} style={{border:'1px solid #000',marginBottom:'15px'}}>
                        <div dangerouslySetInnerHTML={{__html: question.direction}} />
                        <div dangerouslySetInnerHTML={{__html: question.question}} />
                        <div>
                            <form>
                                <input type="radio" name="option" value="(A)"/>{question.option_a}<br/>
                                <input type="radio" name="option" value="(B)"/>{question.option_b}<br/>
                                <input type="radio" name="option" value="(C)"/>{question.option_c}<br/>
                                <input type="radio" name="option" value="(D)"/>{question.option_d}
                            </form>
                        </div>
                    </div>
                ))
        }
            
        return (
            <div>
                {display}
            </div>
        );
    }
};

const mapStateToProps = state => {
    return {
        questions: state.questions.items,
    }
}


export default connect(mapStateToProps, {getQuestionsList})(Test);

Answer 1

在这里我设置了localStorage。在每个 onTopicClick 上，我都会得到所需的输出（意味着第二个 if 语句运行并更新组件）。只有当 localStorage 被删除时，它才会停留在第二个 if 语句上，但情况并非如此（它应该首先运行 if 语句）。我有两个功能（在单独的组件中），例如 onSectionClick 和 onTopicClick，如下所示：

onTopicClick = () => {

        this.props.getQuestionsList(this.props.topicId);

        let topicName = this.props.name;
        topicName = topicName.replace(/\s+/g, '-').toLowerCase();
        let topicLink = "/updates/daily-practice-questions/" + this.props.sectionName + "/" + topicName;
        this.props.history.push(topicLink);
        localStorage.setItem('topic-link', topicLink);
    }
    
onSectionClick = () => {
        this.setState(prevState => ({
            isOpened: !prevState.isOpened
        }));
        let sectionName = this.props.name;
        sectionName = sectionName.replace(/\s+/g, '-').toLowerCase();
        this.setState({sectionName: sectionName});
        this.props.history.push("/updates/daily-practice-questions/" + sectionName);
        if(this.state.isOpened){
            this.props.history.push("/updates/daily-practice-questions");
            localStorage.removeItem('topic-link')
        }
    }

Answer 2

可能是数据通信中最难的话题之一。

let topicLink = localStorage.getItem('topic-link');这条线是钱线。基本上，您已经确定了该组件的驱动程序，例如，topicLink。

接下来要确保这个组件使用这个变量作为 prop 输入。我注意到您已经在使用 redux，因此这个变量可能是那里的状态变量的一部分。

• 下一步将查看您的商店是否可以从 localStorage 更新此变量。这可能是另一个话题，例如，每 5 秒检查一次 localStorage，然后更新 store 变量。

• 但是，通过 localStorage 变量同步组件并不是一个好主意，相反，您应该引导您的代码并首先将此 localStorage 变量保存为状态变量，然后存储在您的 redux 中。

因此，无论哪种方式，输入道具都是第一步，它还可以帮助您测试代码。