React useState 修改值之后，如何获取到最新的值

[17681880207]

页面上有一个 radio group，点击 radio 按钮之后，重新获取 table 数据。 在 setModule 之后，需要立马重新获取表格数据，但是发现 module 值是老的。

let [module, setModule] = useState('1')

const changeModule = (e) => {
  setModule(e.target.value)
  getTableData （）
  console.log('module :', module) // 此时，发现 module 的值是老的
}

const getTableData = async () => {
  const params = {}
  Object.assign(params, {
    moduleId: module
  })
  // 此时的 moduleId 发现是老的值，而不是新点击的值
  const r = await axios.get('/get-table-data', params)
}

<Radio.Group 
  options={[
    {label: 'option1', value: '1'}, 
    {label: 'option2', value: '2'},
    {label: 'option3', value: '3'},
    {label: 'option4', value: '4'}
  ]}
  value={module} 
  onChange={changeModule}/>

各位大神，应该如何处理？

[JimmyquSpe]

settimeout

[17681880207]

@JimmyquSpe 不会吧....

[coolcoffee]

你如果要基于 module 更新去执行 getTableData， 那么你应该这样做。

``` javascript
useEffect(() => {
if (module) {
getTableData();
}
}, [module]);
```

[johnwood]

# 1
getTableData （ e.target.value ）

#2
useEffect((）=>{getTableData()},[module])

[X_Del]

```
useEffect(() => {
getTableData()
}, [module]);
```

[Yvette]

https://stackoverflow.com/questions/56247433/how-to-use-setstate-callback-on-react-hooks

[Leviathann]

改一下 getTableData，把 value 传进去？

[Rocketer]

楼上说的很清楚了，要靠 useEffect 来监控值的变化。

但你这个情况有点简单，何不直接用 e.target.value ？

[mightofcode]

用 useEffect

module 不是一个简单的变量，相关操作都要依赖 react 的体系

[lingo]

这情况 useEffect 应该是最符合 react hook 思想的做法了吧

[towave]

传参最快

[zhaol]

react 的 setState 在 js 代码里面表现是异步的，所以你拿的值不是最新的。用 settimeout 可以解决，但是不推荐； react hook 就用 useEffect，class component 就在 setState 的第二个参数做查询；传参也简单，楼上的解决方法都挺好的

[wiluxy]

~~~js
let [module, setModule] = useState('1')

const changeModule = (e) => {
setModule(e.target.value)
getTableData （）
}
useEffect(()=>{
console.log('module :', module) // 每次更新 module 后的逻辑写在次，拿到的 module 是最新的
},[module])

const getTableData = async () => {
const params = {}
Object.assign(params, {
moduleId: module
})
// 此时的 moduleId 发现是老的值，而不是新点击的值
const r = await axios.get('/get-table-data', params)
}

<Radio.Group
options={[
{label: 'option1', value: '1'},
{label: 'option2', value: '2'},
{label: 'option3', value: '3'},
{label: 'option4', value: '4'}
]}
value={module}
onChange={changeModule}/>
~~~

[flybears]

const changeModule = (e) => {
setModule(e.target.value)
setModule(e => {})
}

[flybears]

const changeModule = (e) => {
setModule(e.target.value)
setModule(value => {
//这个是修改之后的值
console.log(value)
})
}

[flybluewolf]

哎，回复没一个对的。useReducer 啊，多看官方文档啊

[Puteulanus]

狗头，之前写过一种，能用，不确定是不是正确实践

const getModule = () => new Promise(resolve => {
setModule(oldState => {
resolve(oldState);
return oldState;
});
})

用的时候

setModule('2');
await console.log(getModule()); // get 2

[Puteulanus]

console.log(await getModule()) ，手滑

[huangyu2021]

原理就是产生了闭包 一直是原来的值
解决方法很多

[shengyueming]

1.setstate 的 callback
2.componentdidupdate
3.useeffect
4 redux-thunk

[coolcoffee]

@flybluewolf useReducer 操作异步方便吗？

[guoliim]

setState 是 批处理
还是 要再看一下 官方文档吧

[dengshen]

嗯！千人千面。我用 vue/doge

[DOLLOR]

把 getTableData 拎到组件外面，以参数形式把 module 传给 getTableData，并以返回值把请求的数据传回组件。