Javascript React-使用状态外的函数设置组件状态，是否错误？

在React组件之外的函数中使用setState是否错误

例如：

//myFunction.js
函数myFunction（）{
...
this.setState（{…}）
}
//App.js
从“./myFunction”导入myFunction
类应用程序扩展组件{
构造函数（）{
超级（）
this.myFunction=myFunction.bind（this）
}
...
}

我不确定您的绑定方式是否能够实际工作。你可以这样做：

export const getName = (klass) => {
  klass.setState({ name: 'Colin'})
}

然后

类应用程序扩展组件{
状态={
名称：“反应”
};
handleClick=（）=>{
getName（这个）；
}
render（）{
返回(
{this.state.name}

改名
);
}
}

---

工作示例。

这没有错，函数从未在组件外部调用过。这是一种混合技术<只要函数不用作回调函数，就不需要代码>绑定。在这种情况下，

myFunction

在所有实例中都是相同的，更有效的方法是：

class App extends Component {}
App.prototype.myFunction = myFunction;

---

因此，这样做的唯一原因是如果您正在减少重复代码，例如，在调用

this.setState

之前，两个组件使用相同的逻辑，或者如果您希望通过使用单独的纯函数进行测试来简化测试。因此，我建议不要在外部函数中调用

this.setState

，而是返回所需的对象，这样它就可以调用

this.setState

function calculateSomeState(data) {
  // ...
  return { updated: data };
}

class MyComponent extends React.Component {
    constructor(props) {
      super(props)
      this.state = calculateSomeState(props.data);
    }

    handleChange = (e) => {
        const value = e.target.value;
        this.setState(calculateSomeState({ ...props.data, value }));
    }
}

---

它看起来像一个等待发生的错误。。。如果要使用外部函数设置状态，可以使用React提供的替代语法：

this.setState((prevState, props)  => {
  return updatedState; //can be a partial state, like in the regular setState
});

---

该回调可以很容易地提取到外部函数中，并且保证能够工作

这并没有错。你实际上是在创建一个mixin函数。@corasan这样的代码真的为你运行吗？@Colin是的，工作得很好是的，它工作得很好是的，我只是想知道它是否是反模式的，不应该这样做，比如对组件的负面影响，等等，因为新方法，但我有和op一样的问题。这种写作方式应该被鼓励吗？我想不会。就个人而言，我不会使用它，而且我也从未在任何地方见过它。“只要函数不用作回调，就不需要绑定。”–你能解释一下吗？如果它作为回调传递，它应该绑定，例如

onClick={this.myFunction}

。如果使用适当的上下文调用它，如

this.myFunction（）

，则不应绑定它。你在哪里使用这个功能？

this.setState((prevState, props)  => {
  return updatedState; //can be a partial state, like in the regular setState
});