当状态改变时,用状态数据发送ajax请求

Question

我有一个反应组件,我在其中使用日期选择器.基于所选日期的值,我发送一个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 只是为了简化视图的渲染，而不是为了像 Http 调用这样的复杂逻辑。

使用 Flux，您可以快速创建基础架构来处理 UI 渲染和应用程序的任何其他逻辑。

完整的教程在这里，但我将添加一个快速摘要，以便您可以轻松入门。

添加 4 个类作为您的基础设施：

1. YourComponentActions - 此类将处理您的组件将触发的“操作”。操作实际上是一个事件，它将从您的组件触发到执行实际逻辑的对象（第 4 点）。

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

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

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

感觉很复杂，但从现在开始，您可以轻松地向您的应用程序添加任何逻辑，同时保持其解耦、可读且易于维护。在这里阅读有关 Flux 的更多信息。