Question

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

示例：

// myFunction.js
function myFunction() {
  ...
  this.setState({ ... })
}

// App.js
import myFunction from './myFunction

class App extends Component {
  constructor() {
    super()
    this.myFunction = myFunction.bind(this)
  }

  ...
}

Answer 1

我不确定你绑定的方式是否真的有用。你可以这样做：

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

然后

class App extends Component {
  state = {
    name: 'React'
  };

  handleClick = () => {
    getName(this);
  }

  render() {
    return (
      <div>
        <p>{this.state.name}</p>
        <button onClick={this.handleClick}>change name</button>
      </div>
    );
  }
}

工作示例here。

Answer 2

因此，执行此操作的唯一原因是，如果您要减少重复的代码，例如两个组件在调用zmq_msg之前使用相同的逻辑，或者如果您希望通过单独的纯函数进行测试来使测试更容易。出于这个原因，我建议在您的外部函数中不调用this.setState，而是返回您需要的对象，以便可以在其上调用this.setState。

this.setState

Answer 3

没错，函数永远不会在组件外部调用。这是一种混合技术。只要函数不用作回调函数，就不需要bind。在这种情况下，myFunction在所有实例中都是相同的，更有效的方法是：

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

Answer 4

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

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

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

React - 使用状态之外的函数设置组件状态，是不是错了？

4 个答案: