处理componentDidUpdate

Question

我正在使用带有文本输入的简单表格。写入内容后，组件的状态将更新，并且由于this.setState是异步的，因此我从componentDidUpdate上的API获取数据。

问题是我找不到避免无限循环的解决方案，因为我在使用axios后更新了状态：

constructor(props) {
    super(props);
    this.state = {
      searchValue: "",
      data: null,
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

handleInputChange(event) {
    this.setState({ searchValue: event.target.value });
}

componentDidUpdate() {
    const url = 'https://www.google.com/?search=' + this.state.searchValue;
    axios.get(url).then(response => this.setState({data: response.data}));
}

Answer 1

由于要在输入更改时获取新数据，因此可以直接在import math math.floor(x) 回调中进行调用。

handleInputChange

现在，如果您想使用handleInputChange({target: {value}}) { this.setState({ searchValue: value }); this.fetchData(value); } fetchData(text) { const url = 'https://www.google.com/?search=' + text; axios.get(url).then(({data}) => this.setState({data})); } ，可以将componentDidUpdate与您的状态进行比较。

previousState

还带有钩子：

handleInputChange({target: {value}}) {
  this.setState({ searchValue: value });
}

fetchData(text) {
  const url = 'https://www.google.com/?search=' + text;
  axios.get(url).then(({data}) => this.setState({data}));
}

componentDidUpdate(prevProps, prevState) {
  // only update if searchValue has changed
  if (prevState.searchValue !== this.state.searchValue) {
     this.fetchData(this.state.searchValue);
  }
}