Question

例如，我有这样的代码：

class Example extends Component {
  constructor() {
    super();
    this.state = {
      value: "",
      disabled: false,
      isLoaderOpened: false
    };
  }

  render() {
    return (
      <div>
        <input
          value={this.state.value}
          onChange={this.onChange}
          disabled={this.state.disabled}
        />
        <button onClick={this.onClick}>Load</button>
        {this.state.isLoaderOpened && <div>Loading</div>}
      </div>
    );
  }

  onClick = () => this.fetchData(this.state.value);

  onChange = e => this.setState({ value: e.target.value });

  fetchData = value => {
    Promise.resolve()
      .then(() => this.setState({ disabled: true }, () => showLoader()))
      .then(() => this.handleRequest(this.props.url, value))
      .then(res =>
        this.setState({ data: res.json() }, () => this.hideLoader())
      );
  };

  showLoader = () => this.setState({ isLoaderOpened: true });

  hideLoader = () => this.setState({ isLoaderOpened: false });

  handleRequest = (url, value) => fetch(url + "?value=" + value);
}

我是否使用setState来调用setState函数是不是很糟糕？我想重复使用经常使用的方法，为简洁起见，将它们作为setState中的回调传递是很方便的。

Answer 1

将setState()召唤两次或更多次真的不太好。在您的情况下，您可以尝试将参数传递给hideLoader()和showLoader() 例如：

showLoader = (otherState = {}) => this.setState({ ...otherState, isLoaderOpened: true });

hideLoader = (otherState = {}) => this.setState({ ...otherState, isLoaderOpened: false });

然后你可以将你想改变的其他状态传递给方法：

fetchData = value => {
    Promise.resolve()
      .then(() => this.setState({ disabled: true }, () => showLoader()))
      .then(() => this.handleRequest(this.props.url, value))
      .then(res =>
          this.hideLoader({ data: res.json() })
    );
};

从React.js中的this.setState（）调用this.setState（）是不是很糟糕？

1 个答案: