持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

前言

今天来讲讲近期碰到的几个React方面的问题吧，在实际开发中可能会经常碰到，所以希望我碰到的问题以及我的个人见解能够帮助到正在利用React进行开发的你们！那么话不多说，直接进入正题吧。

具体内容

1.useState

相信利用React进行项目开发的同学对这个一定不陌生吧，现在我们的组件基本都是利用的函数式组件而非类式组件，正是因为Hook的强大我们才会越来越多的使用函数式组件。对于usestate我们需要明白几点：

对于每次渲染，它都有自己的props、state和事件处理函数，每次点击事件更新state的时候，函数组件会被重新调用，但正是由于每次渲染都是独立的，所以取到的值不会受到影响。
对于initialState初始参数，它只会在页面组件的初始渲染中起作用，后续重新渲染会被忽略。
与类式组件不同，函数组件中的useState传入的状态值如果没有发生改变，则不会发生重新渲染；如果状态值发生了改变，直接替换而不是合并状态值。而我在学习React开发项目中就遇到了useState的问题，其中遇到的问题如下：

function Component() {
  const columns =[
    {XXXXX}
  ]
  const [datalist, setDatalist] = useState([])

  function getList() {
    requestD(相关参数，封装在requestD里面).then(res => 
      setDatalist(res.data);
      console.log(datalist);
    )
  }


  return (
    <Fragment>
      <button onClick={getList}>
        开始获取数据
      </button>
      <Table
        columns={columns}
        data={datalist}
        expandedRowRender={(record) => {
          return `This is No.${record.key} description.`;
        }}
        onExpand={(detail, expanded) => {
          console.log(detail, expanded);
        }}
        onExpandedRowsChange={(expandedRows) => {
          console.log(expandedRows);
        }}
      />
    </Fragment>
  )
}

我们封装一个table组件和按钮的组件组合封装起来，点击按钮获取数组，参数和配置已经写好，当我们点击的时候发现我们能够成功地将结果呈现在table组件中去，但是发现我们打印的datalist却还是空数组，那么这是为什么呢？

由于useState中的setXXX是异步的，这就导致了我们不能够打印出datalist实际的值，实际上赋值操作已经完成了只是我们通过控制台不能够看到。对于这种我们不能够通过控制台直接获取值的时候，我们可以采用以下方法：

我们可以使用ref。使用ref来存储状态然后利用它去修改状态，这样我们就能够读取状态值了。
我们也可以使用回调函数进行传参，这样同样可以获取到状态值。
第三种，可以利用useEffect来监控值的改变，如果状态值发生改变，我们就可以通过其获取。

总结

对于这个异步的坑之前开发的时候一直以为是自己没有赋值成功导致浪费了很多的开发时间，所以希望我的这篇文章能够帮助到正在利用React开发项目的你。

React开发项目踩坑---Hook使用

前言

具体内容

1.useState

总结