react的map函数中的setState

博纳

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

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

控制台窗口参考: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中更新状态的正确方法吗?

里亚杰汗

setState是 async.In Array#map,它多次调用。只有最后一个值添加到数组 regionAll 中,而不是全部,因为具有多个值的异步 setState 调用。

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React中的Map函数

来自分类Dev

在 map() 内的 React 中回调 setState

来自分类Dev

CytoscapeJS 在 React 中调用 setState 函数

来自分类Dev

如何在React中动态填充选择选项的setState?TypeError:this.state.schoolName.map不是函数

来自分类Dev

未处理的承诺拒绝:TypeError:undefined 不是评估“departureloc.map”的函数,当在 React Native 中映射 setState 时发生

来自分类Dev

如何在React Hook的setState()函数中绑定参数?

来自分类Dev

嵌套异步函数中的setState-React Hooks

来自分类Dev

在 ES8 的 async/await 中包装 React 的 setState 函数

来自分类Dev

React setState 函数的小问题

来自分类Dev

扩展运算符无法在使用.map()函数的useEffect中的嵌套setState中工作

来自分类Dev

渲染函数中的 setState() 返回?

来自分类Dev

在react中的array.map函数中重新调整值

来自分类Dev

TypeError:records.map不是React中的函数

来自分类Dev

React不会在map函数中渲染元素

来自分类Dev

Map函数不会在React JSX中返回项目

来自分类Dev

对map函数中特定的react元素执行操作

来自分类Dev

从子函数内部调用React setState

来自分类Dev

React Uncaught TypeError:this.setState 不是函数

来自分类Dev

× React -TypeError: _this.setState 不是函数

来自分类Dev

React Native - this.setState 不是函数

来自分类Dev

_this2.setState不是react-native中的函数错误

来自分类Dev

React useEffect:返回函数中的setState不会及时更新状态

来自分类Dev

React.StrictMode:useEffect中的SetState函数运行一次效果时会运行多次

来自分类Dev

react js无法在setState回调函数中获取更新的值

来自分类Dev

使用 ES6 语法在 React 中未定义 setState 函数?

来自分类Dev

在 Map 函数中反应 Map 函数

来自分类Dev

无法识别Future函数中的setState

来自分类Dev

在构造函数抖动中调用SetState()

来自分类Dev

setState在onChange函数中不起作用

Related 相关文章

  1. 1

    React中的Map函数

  2. 2

    在 map() 内的 React 中回调 setState

  3. 3

    CytoscapeJS 在 React 中调用 setState 函数

  4. 4

    如何在React中动态填充选择选项的setState?TypeError:this.state.schoolName.map不是函数

  5. 5

    未处理的承诺拒绝:TypeError:undefined 不是评估“departureloc.map”的函数,当在 React Native 中映射 setState 时发生

  6. 6

    如何在React Hook的setState()函数中绑定参数?

  7. 7

    嵌套异步函数中的setState-React Hooks

  8. 8

    在 ES8 的 async/await 中包装 React 的 setState 函数

  9. 9

    React setState 函数的小问题

  10. 10

    扩展运算符无法在使用.map()函数的useEffect中的嵌套setState中工作

  11. 11

    渲染函数中的 setState() 返回?

  12. 12

    在react中的array.map函数中重新调整值

  13. 13

    TypeError:records.map不是React中的函数

  14. 14

    React不会在map函数中渲染元素

  15. 15

    Map函数不会在React JSX中返回项目

  16. 16

    对map函数中特定的react元素执行操作

  17. 17

    从子函数内部调用React setState

  18. 18

    React Uncaught TypeError:this.setState 不是函数

  19. 19

    × React -TypeError: _this.setState 不是函数

  20. 20

    React Native - this.setState 不是函数

  21. 21

    _this2.setState不是react-native中的函数错误

  22. 22

    React useEffect:返回函数中的setState不会及时更新状态

  23. 23

    React.StrictMode:useEffect中的SetState函数运行一次效果时会运行多次

  24. 24

    react js无法在setState回调函数中获取更新的值

  25. 25

    使用 ES6 语法在 React 中未定义 setState 函数?

  26. 26

    在 Map 函数中反应 Map 函数

  27. 27

    无法识别Future函数中的setState

  28. 28

    在构造函数抖动中调用SetState()

  29. 29

    setState在onChange函数中不起作用

热门标签

归档