reactjs - Redux - 获取数据，但在另一个组件中呈现

Question

我目前正在 Component1 中获取数据，然后分派(dispatch)一个操作以使用响应更新商店。 this.props中的Component2可以看到数据，但是返回response时如何渲染呢？我需要一种在数据返回时重新加载组件的方法。

最初我在 componentDidMount 中运行了一系列函数，但这些函数都是在数据从 Component1 返回到 Redux 存储之前执行的。组件之间是否存在某种async/await 样式？

class Component1 extends React.Component {
    componentDidMount() {
        this.retrieveData()
    }

    retrieveData = async () => {
        let res = await axios.get('url')
        updateParam(res.data) // Redux action creator
    }
}

class Component2 extends React.Component {
    componentDidMount() {
       this.sortData()
    }

    sortData = props => {
        const { param } = this.props
        let result = param.sort((a,b) => a - b)
    }
}

mapStateToProps = state => {
    return { param: state.param }
}

connect(mapStateToProps)(Component2)

在Component2中，this.props最初是未定义的，因为数据还没有返回。返回时，尽管 this.props 中填充了数据，组件将不会重新呈现。

Answer 1

假设 updateParam 操作创建者正确包装在 connect HOC mapDispatchToProps 中对 dispatch 的调用 AND 从 Component1 中的 Prop 正确访问，然后我建议检查/比较 Prop 与 componentDidUpdate 中的先前 Prop 并调用 sortData 如果特别是 param 属性值已更新。

class Component2 extends React.Component {
    componentDidMount() {
       this.sortData()
    }

    componentDidUpdate(prevProps) {
      const { param } = this.props;
      if (prevProps.param !== param) { // <-- if param prop updated, sort
        this.sortData();
      }
    }

    sortData = () => {
        const { param } = this.props
        let result = param.sort((a, b) => a - b));
        // do something with result
    }
}

mapStateToProps = state => ({
  param: state.param,
});

connect(mapStateToProps)(Component2);

编辑

从存储库中给定组件代码

let appointmentDates: object = {};
class Appointments extends React.Component<ApptProps> {
    componentDidUpdate(prevProps: any) {
        if (prevProps.apptList !== this.props.apptList) {
            appointmentDates = {};
            this.setAppointmentDates();
            this.sortAppointmentsByDate();
            this.forceUpdate();
        }
    }

    setAppointmentDates = () => {
        const { date } = this.props;
        for (let i = 0; i < 5; i++) {
            const d = new Date(
                new Date(date).setDate(new Date(date).getDate() + i)
            );
            let month = new Date(d).toLocaleString("default", {
                month: "long"
            });
            let dateOfMonth = new Date(d).getDate();
            let dayOfWeek = new Date(d).toLocaleString("default", {
                weekday: "short"
            });
            // @ts-ignore
            appointmentDates[dayOfWeek + ". " + month + " " + dateOfMonth] = [];
        }
    };

    sortAppointmentsByDate = () => {
        const { apptList } = this.props;
        let dates: string[] = [];
        dates = Object.keys(appointmentDates);
        apptList.map((appt: AppointmentQuery) => {
            return dates.map(date => {
                if (
                    new Date(appt.appointmentTime).getDate().toString() ===
                    // @ts-ignore
                    date.match(/\d+/)[0]
                ) {
                    // @ts-ignore
                    appointmentDates[date].push(appt);
                }
                return null;
            });
        });
    };

    render() {
        let list: any = appointmentDates;

        return (
            <section id="appointmentContainer">
                {Object.keys(appointmentDates).map(date => {
                    return (
                        <div className="appointmentDateColumn" key={date}>
                            <span className="appointmentDate">{date}</span>
                            {list[date].map(
                                (apptInfo: AppointmentQuery, i: number) => {
                                    return (
                                        <AppointmentCard
                                            key={i}
                                            apptInfo={apptInfo}
                                        />
                                    );
                                }
                            )}
                        </div>
                    );
                })}
            </section>
        );
    }
}

appointmentDates 应该是一个本地组件状态对象，然后当您在生命周期函数中更新它时，React 将正确地重新呈现，您不需要强制执行任何操作。 OR 因为除了计算要呈现的格式化数据之外您没有做任何事情，Appointments 应该只调用 setAppointmentDates 并且sortAppointmentsByDate 在渲染函数中。