Question

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

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上，我都得到所需的输出（如果语句运行并更新组件，则表示第二个）。仅当删除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。

下一步是确保此组件将此变量用作道具输入。我注意到您已经在使用redux，因此该变量可能是其中状态变量的一部分。

下一步将是查看您的商店是否可以从localStorage更新此变量。这可能是另一个主题，例如，每5秒检查一次localStorage，然后更新store变量。
但是，通过localStorage变量同步组件不是一个好主意，相反，您应该引导代码并将该localStorage变量首先保存为状态变量，然后存储在例如redux中。

无论哪种方式，输入prop都是第一步，它将帮助您测试代码。

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

2 个答案: