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呈现和应用程序的任何其他逻辑。

完整的教程是here，但我会添加一个快速摘要，以便您轻松上手。

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

YourComponentActions - 此类将处理组件将触发的“操作”。动作实际上是一个事件，将从您的组件触发到将执行实际逻辑的事件（第4点）。
SharedConstans - 此类将包含您应用的事件名称。
AppDispatcher - 此类将管理您的事件处理应用
YourComponentStore - 此类将注册到操作的事件并处理http调用。以下是与UI分离的组件逻辑。收到来自您的ajax电话的回复后，您将从您的商店中触发另一个事件，您的组件将注册到该商店，然后才更新状态。

感觉很复杂但是从现在开始，您可以轻松地为您的应用添加任何逻辑，同时保持其分离，可读和易于维护。详细了解Flux here。

Answer 2

您应该在select p.id,p.name from pools p inner join alerts a on p.id=a.poolid where date(a.created_date)!=date(sysdate())中触发另一个网络请求，状态发生变化时没有生命周期方法。

从技术上讲，你可以在onDateSelectionChanged（或更糟，componentWillUpdate）中做一些逻辑，以便在状态字段发生变化时发出请求并且它可以正常工作，但你不应该这样做。这两种生命周期方法都有明确定义的目的，使网络请求不那么清晰，难以维护。

Answer 3

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

说到生命周期方法，唯一明确建议触发请求的方法是componentDidMount方法，在那里您有机会进行一些ajax初始化操作，如您在{ {3}}，但它们都不适合普通数据提取。

另一方面，我建议您真正了解docs，这是一个解决许多问题的架构，关注点分离就是它们。您的问题在于，您将组件绑定到 Ajax 请求的创建，这些请求不会提升可重用性并使您的代码难以维护。将组件视为呈现内容和捕获用户输入的工具，烦恼请求和响应或处理和存储传入的数据不应该是他们的关注（至少在更大规模）。

您当然可以将请求创建者与外部函数分开，但如果您倾向于编写 React frontend ，您迟早会面临诸如将props交给许多中间组件或通过组件层次结构传播事件，如果没有某种架构，这是非常繁琐和混乱的，Flux是解决这些问题的最佳解决方案，因此是第一个要学习的技术 - 如果你的意思是{{1}认真的。

Answer 4

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
               })
           }
        })
    });
}

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

4 个答案: