react的map函数中的setState

Question

我的要求是更新 componentWillReceiveProps 的 map 函数中的状态值。

在控制台日志中，我得到的只是 1，但 sub.subscribed 包含 0 和 1

控制台参考window：http://prntscr.com/jqifiz

constructor(props) {
    super(props);
      this.state = {
        regionAll: [],
      };
    }
componentWillReceiveProps(nextProps){
    if(nextProps.apiData !== false ){
      nextProps.apiData.data.datacenter.category.map((sub)=> {
        console.log(sub.subscribed,'sub.subscribed');
        this.setState({
          regionAll: [
            ...this.state.regionAll,
            sub.subscribed
          ]
        },()=>{
          console.log(this.state.regionAll,'sub');
        })
      })
  }

这是在 reactjs 中更新状态的正确方法吗？

Answer 1

出现问题是因为 setState 调用是批处理的，并且您是根据 prevState 更新 React 状态的，对于这种情况，您应该改用功能状态

componentWillReceiveProps(nextProps){
    if(nextProps.apiData !== false ){
      nextProps.apiData.data.datacenter.category.map((sub)=> {
        console.log(sub.subscribed,'sub.subscribed');
        this.setState(prevState => ({
          regionAll: [
            ...prevState.regionAll,
            sub.subscribed
          ]
        }),()=>{
          console.log(this.state.regionAll,'sub');
        })
      })
  }

然而，在地图中调用 setState 并不是一个好主意，您可以改为从地图中获取数据并只调用一次 setState，例如

componentWillReceiveProps(nextProps){
    if(nextProps.apiData !== false ){
      const subscribed = nextProps.apiData.data.datacenter.category.map((sub)=> {
        console.log(sub.subscribed,'sub.subscribed');
        return sub.subscribed;
      })
      this.setState(prevState => ({
          regionAll: [
            ...this.state.regionAll,
            ...subscribed
          ]
        }),()=>{
          console.log(this.state.regionAll,'sub');
     })
  }

Answer 2

setState is async.In Array#map，它调用了多个 time.Only 最后一个值被添加到数组 regionAll 中，而不是全部因为异步 setState 调用具有多个值。

您可以使用 Array#reducer 在单个数组中收集所有 sub.subscribed 值，然后执行状态更新。

if (nextProps.apiData !== false) {

    let sub = nextProps
        .apiData
        .data
        .datacenter
        .category
        .reduce((accum, sub) => [
            ...accum,
            sub.subscribed
        ], [])

    this.setState({
        regionAll: [...sub]
    }, () => {
        console.log(this.state.regionAll, 'sub');
    })
}