Javascript 每次击键时响应API调用-componentwillUpdate出现问题

设置 当我的组件挂载时，我的状态中有一个空的相册数组

我在做什么

在输入框中的每个输入上，我都进行一个API调用，该调用返回一个相册列表，并根据输入进行更改。我想在不改变旧阵列的情况下将相册添加到阵列中。因此，每次击键都应该创建一个新数组

另外，更值得关注的是，由于我无法

setState

因为这会导致一个无限循环，应该如何做<代码>组件将接收道具也不能使用，因为它在每次按键时都不会接收道具/

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} />
      );
    }
}

类查找扩展组件{
建造师（道具）{
超级（道具）；
此.state={
相册名称：“”，
相册：[]
};
this.updateAlbum=this.updateAlbum.bind（this）；
}
组件将更新（下一步，下一步状态）{
get（'url'{
参数：{albumName:nextState.albumName}
})。然后（（响应）=>{
这是我的国家({
albumName:[…response.data.items]
});
}).catch（（错误）=>{
console.log（错误）；
});
}
updateAlbum（值）{
这是我的国家({
专辑：价值
});
}
render（）{
const{album}=this.state；
const{updateAlbum}=this；
返回(
进入相册
);
}
}

这里的解决方案非常简单

将next

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);
        });
    }
}

---

为什么要使用

componentWillUpdate

进行此操作？为什么不在

onChange

事件处理程序中执行此操作？这是为了什么？this.setState（{album:value}）；看起来您没有使用此属性。@JamesDonnelly这看起来可能是一个非常有效的点：-）很好！格雷西亚斯·霍姆布雷！不客气。如果有帮助，请接受答案；）