时间戳

首页 > 解决方案 > 将数据回传到 api，而无需强制渲染组件完成所有操作

reactjs - 将数据回传到 api，而无需强制渲染组件完成所有操作

问题描述

我有一个反应组件，用于上下投票，我试图用它来发回数据。例如，按钮投票，按钮投票，更改内部状态以记录投票赞成或反对。

上下票

现在是时候将数据更改发布回 API。这个组件几乎是一个渲染组件：

<Feedbackify up={44} down={23} />

因此，您将当前的投票状态提供给它，它只会渲染它们，并且当前它会在您投票赞成或反对时修改自己的内部状态。我可以在组件内部从 POST 或 PUT 到 api，但我不希望这样做。通过某种方式从外部发布到组件的最惯用的方式是什么？

<Feedbackify up={44} down={23} onChange={someOnChange}/>

或者是否有更清洁的反应替代方法？

标签： reactjs

解决方案

一般的做法是把state up 列出来。因此，父组件具有赞成票和反对票的状态，Feedbackify只传递给投票的值和someOnChange（就像你一样）。在每次投票更改（someOnChange待命）时，父级的状态都会更改，并且更新的投票作为道具传递给Feedbackify. parent 还负责将数据发送到 api。

例子

class Parent extends React.Component {
    constructor (p) {
        super (p);
        this.state = {
            up: 0,
            down: 0
        }
    }

    someOnChange (event) {
        let { up, down } = this.state;
        // Assuming value will be positive for upvote and negative for downvote
        if (event.target.value > 0)
            up += event.target.value;
        else
            down += event.target.value;

        doAsyncPost (up, down); // Post to server API
        this.setState ({ up, down });
    }

    render () {
        return <Feedbackify up={this.state.up} down={this.state.down} onChange={this.someOnChange.bind(this)}/>
    }
}

此外，您可以考虑使用Redux集中管理所有组件的状态

推荐阅读