javascript - 当状态改变时发送带有状态数据的 ajax 请求

Question

我有一个 React 组件，我在其中使用了一个日期选择器。根据所选的Date 值，我发送了一个ajax 请求来获取数据。 我没有使用任何框架，例如 redux 或 flux。

export default class MyComponent extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        // Initial fetch request based on the default date
    }

    onDateSelectionChanged(fromDate, toDate) {
        this.setState({
            fromDate,
            toDate
        });
    }

    render() {
        return (
            <div className="row">
                <DateRangePicker callBackParent = {this.onDateSelectionChanged}/>
                {/* other stuff */}
            </div>
        );
    }
}

现在假设我将日期更改为另一个日期。再次获取数据的最佳方法是什么？我应该在 onDateSelectionChanged 中再次触发请求还是有任何生命周期方法？

Answer 1

我强烈建议将 ajax 逻辑与您的组件分离。请记住，纯 React 的构建只是为了简化 View 的呈现，而不是为了像 Http 调用这样的复杂逻辑。

使用 Flux，您可以快速创建用于处理应用的 UI 渲染和任何其他逻辑的基础设施。

完整教程为here但我会添加一个快速摘要，以便您可以轻松入门。

添加 4 个将成为您的基础架构的类:

1. YourComponentActions - 此类将处理您的组件将触发的“ Action ”。一个 Action 实际上是一个事件，它将从您的组件触发到将执行实际逻辑的东西(第 4 点)。

2. SharedConstans - 此类将保存您应用的事件名称。

3. AppDispatcher - 此类将管理您的事件处理 应用。

4. YourComponentStore - 此类将注册到操作的事件并处理 http 调用。这是与 UI 分离的组件逻辑。在收到来自 ajax 调用的响应后，您将从商店触发另一个事件，您的组件将注册到它，然后才更新状态。

感觉很复杂，但是从现在开始，您可以轻松地向您的应用程序添加任何逻辑，同时保持应用程序的解耦、可读性和易于维护。 阅读更多有关助焊剂的信息 here .