reactjs - 处理 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

因为你想在输入变化时获取新数据，你可以直接在 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);
  }
}

还有钩子(Hook):

const [searchValue, setSearchValue] = useState('');
const [data, setData] = useState(null);

function handleInputChange({target: {value}}) {
   setSearchValue(value);
}

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

useEffect(() => {
  // don't run on componentDidMount or if string is empty
  if (searchValue) {
    fetchData(searchValue);
  }
}, [searchValue]);

2021 年更新

上面的实现工作正常，但是在 useEffect 中有一个更好的方法来处理请求:

    const [searchValue, setSearchValue] = useState('');
    const [data, setData] = useState(null);
    
    function handleInputChange({target: {value}}) {
       setSearchValue(value);
    }
    
    useEffect(() => {
      async function fetchData(text) {
         try {
            // don't run on componentDidMount or if string is empty
            if (text) {
              return
            }

            const url = `https://www.google.com/?search=${text}`;
            const { data } = await axios.get(url);
            setData({ data });
         } catch(e) {
           // handle error
         }
      };

      fetchData(searchValue);
    }, [searchValue]);