时间戳

首页 > 解决方案 > ReactJS 通过单击另一个组件来更新组件

reactjs - ReactJS 通过单击另一个组件来更新组件

问题描述

嘿，我对 ReactJS 有点陌生，也许我使用了错误的方法，但这就是我得到的。

我有 2 个组件“Course.js”和“WeekDays.js”。

所以我的基本想法是我有一个包含本周日期的“每周”日历和一个基于“每周”日期返回课程的 json API。这本身就可以正常工作。但是当我尝试改变“一天”的状态时它似乎不起作用

这是我的工作日片段

    state = {
      day: "",
    }

    handleClick = (e) =>{
        this.setState({day:e.target.id})
    }

    render() {
        return (
            <div id="WeeklyCalendar" className="row grid">

              <div id="Days" className="col-md-12">

                  <div className="row">
                    { this.state.weeks.map(WeekDays => 

                        <div id={WeekDays.DaysNumber} onClick={this.handleClick} className={`col ${WeekDays.Class}`} key={WeekDays.DaysNumber}>
                            <span>{WeekDays.DaysNumber}</span>
                        </div>

                    )}
                </div>

              </div>

              <div id="SideMenu" className="col-md-3">

                  <Courses value={this.state.day} />

              </div>

            </div>
        );
    }

这是我的课程片段

    state = {
        course:[]
    }

    getJson(){
        axios.get("?day=" + this.props.value)
        .then(res => {
            const course = res.data;
            this.setState({ course:course });
        })
    }

    componentDidMount() {
        this.getJson();
    }

    render() {
        return (
            <div className="row">   

                { this.state.course.map(course => 

                    <div className={`col-md-12 course_${course.id} `} key={course.id}>

                        {course.title}

                    </div>

                )}

            </div>
        );
    }

现在正如我所说，这可以自行工作，如果我设置<Course value="16" />它可以工作，但是当我使用 onclick 功能执行此操作时它不会改变状态

它适用于任何地方，但它不会重新渲染我的组件。如果我在渲染函数中使用 {this.state.day}，它就可以正常工作。我在这里错过了什么吗？

标签： reactjs

解决方案

不确定这是否是您想要的，但您可以做的是使用componentDidUpdate调用getJson.

这里的问题是您只调用该函数componentDidMount并且如果this.props.value更改将不会再次调用它。

componentDidUpdate(prevProps){
    if(prevProps.value !== this.props.value) {
        this.getJson()
    }
}

推荐阅读