在状态更改时发送带有状态数据的 AJAX 请求

sending ajax request with state data when state changes

本文关键字：状态 数据 AJAX 请求      更新时间：2023-09-26

我有一个反应组件，我在其中使用日期选择器。根据所选日期的值，我正在发送一个 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再次触发请求还是有任何生命周期方法？

我强烈建议将ajax逻辑与组件分离。请注意，普通 React 的构建只是为了简化视图的渲染，而不是像 Http 调用这样的复杂逻辑。

使用 Flux，您可以快速创建用于处理应用的 UI 呈现和任何其他逻辑的基础结构。

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

添加 4 个类，这些类将成为您的基础结构：

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

  2. 共享康斯坦斯 - 此类将保存应用的事件名称。

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

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

感觉很复杂，但是从现在开始，您可以轻松地将任何逻辑添加到您的应用程序中，同时保持其分离，可读性和易于维护。在此处阅读有关 Flux 的更多信息。

您应该在 onDateSelectionChanged 中触发另一个网络请求，没有状态更改时的生命周期方法。

从技术上讲，您可以在componentWillUpdate（或更糟的是，shouldComponentUpdate）中做一些逻辑，以便在该状态字段更改时发出请求并且它会起作用，但您不应该这样做。这两种生命周期方法都有明确定义的用途，发出网络请求会使代码不那么清晰且难以维护。

如果你真的坚持从组件方法发送请求，那么在onDateSelectionChanged中触发它绝对是要走的路。由于它响应每个日期更改，因此它自然是唯一能够满足您需求的方法，并且生命周期方法不直接了解日期更改，也不知道如何正确执行。实现类似的东西，例如 componentWillUpdate或componentDidUpdate都可能导致循环执行，这不是您没有充分理由要面对的事情。

说到生命周期方法，唯一明确推荐触发请求的方法componentDidMount方法，您有很好的机会执行一些 ajax 初始化操作，正如您在文档中看到的那样，但它们都不适合普通的数据获取。

另一方面，我建议你真正看看 Flux，这是一个解决许多问题的架构，关注点分离是其中之一。这里的问题是您将组件与 Ajax 请求的创建绑定在一起，这不会促进可重用性，并且会使您的代码更难维护。将组件视为呈现内容和捕获用户输入的工具，他们不应该关心请求和响应或处理和存储传入数据（至少在更大范围内）。

你当然可以将请求创建者与外部函数分开，但如果你倾向于编写 React 前端，你迟早会遇到一些问题，比如props移交给许多中间组件或通过组件层次结构向上传播事件，如果没有某种架构，这是非常乏味和混乱的，Flux是这些问题的最佳解决方案，因此是要学习的第一技术——如果你的意思是 React认真的。

onDateSelectionChanged(fromDate, toDate) {
    var self = this; // we can not use this inside ajax success callback function
    this.setState({
        fromDate,
        toDate
    }, function() { // callback fires after state set
        // your ajax request goes here, let say we use jquery
        $.ajax({
           url: fetch_url, success: function(data) {
               // again we can setState after success, but be careful
               // we can not use "this" here instead we use "self"
               self.setState({
                   someState: data.someValue
               })
           }
        })
    });
}
相关文章：