javascript - 每次击键时响应 API 调用 - componentwillUpdate 问题

Question

设置当我的组件安装时，我的状态中有一个空的相册数组正在 react 。

我在做什么

在输入框中的每个输入中，我都会进行 API 调用，该调用返回专辑列表，并根据输入进行更改。我想将专辑添加到数组中而不改变旧数组。因此，每次击键时都应创建一个新数组。

此外，更令人担忧的是，因为我无法setState，因为这会导致无限循环，应该如何完成？无法使用 ComponentWillReceiveProps，因为它不会在每次按键时接收 props/

class AlbumLookup extends Component {

  constructor(props) {

        super(props);

        this.state = {
            albumName: '',
            albums: []
        };

        this.updateAlbum = this.updateAlbum.bind(this);

  }

  componentWillUpdate(nextProps, nextState) {

        axios.get('url', {
            params: { albumName: nextState.albumName}
        }).then((response) => {
            this.setState({
                albumName: [...response.data.items]
            });
        }).catch((error) => {
            console.log(error);
        });
  }

  updateAlbum(value) {

    this.setState({
           album: value
       });

   }

   render() {

      const { album } = this.state;
      const { updateAlbum } = this;

      return (
         <label>Enter Album</label>
         <Input value={album} onChange={updateAlbum} />
      );
    }
}

Answer 1

这里有一个非常简单的解决方案。

将下一个 albumName 值与当前值进行比较，仅在值不匹配时才获取。

componentWillUpdate(nextProps, nextState) {
    if (this.state.albumName !== nextState.albumName) {
        axios.get('url', {
            params: { albumName: nextState.albumName}
        }).then((response) => {
            this.setState({
                albumName: [...response.data.items]
            });
        }).catch((error) => {
            console.log(error);
        });
    }
}