Question

嘿，我是ReactJS的新手，也许我使用了错误的方法，但这就是我所得到的。

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

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

这是我的 WeekDays 代码段

    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函数执行操作时，它不会更改状态

它可在任何地方使用，但不会重新渲染我的组件。如果我在render函数中{this.state.day}可以正常工作。我在这里想念东西吗？

Answer 1

不确定这是否是您想要的，但是可以使用componentDidUpdate来呼叫myFunctionCall(myData);。

这里的问题是，您仅在getJson上调用该函数，并且如果componentDidMount发生更改，则不会再次调用该函数。

this.props.value

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

1 个答案: