在 React 中，在下拉列表中进行提取时应该依赖哪个值？ e.target 值或来自状态的值

Question

这种东西的最佳实践是什么？

handleChange = e => {
    const { value } = e.target;
    this.setState({ selectedOption: value });
    this.fetchrepos(value);
  };



handleChangeVersion2 = e => {
    const { value } = e.target;
    this.setState({ selectedOption: value }, () => {
      this.fetchrepos(this.state.selectedOption);
    });
  };

这是代码https://codesandbox.io/s/cold-dust-ygfos

Answer 1

两者都不。 每个功能都应该有一个明确定义的目标（ 单一职责原则）。 一个用于处理状态更改，另一个用于处理数据获取等副作用。 你不应该把行为结合在一起。

您应该使用组件生命周期函数之一来获取状态中的选择值更新并获取数据。 componentDidUpdate就是其中之一。

handleChange = e => {
  const { value } = e.target;
  this.setState({ selectedOption: value });
};

componentDidUpdate(prevState) {
  if (prevState.selectedOption !== this.state.selectedOption) {
    fetchRepos(this.state.selectedOption);
  }
}

Answer 2

您应该传递e.target值，因为setState是一个异步函数。 但是，如果您在状态更改时触发 api 调用，则依赖状态值并在生命周期方法中触发您的 api 调用。

Answer 3

你所做的也是更好的解决方案来获取 api 作为setState()的回调

  handleChangeVersion2 = e => {
    const { value } = e.target;
    this.setState({ selectedOption: value }, () => {
      this.fetchrepos(this.state.selectedOption);
    });
  };

  async fetchrepos(searcTerm) {
    const response = await fetch(
      `https://api.github.com/search/repositories?q=${searcTerm}`
    );
    const data = await response.json();
    this.setState({ data: data.items });
  }