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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 1703 days ago, the information mentioned may be changed or developed.

页面上有一个 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}/>

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

24 replies • 2021-09-05 22:18:40 +08:00

JimmyquSpe

Sep 3, 2021 via Android

settimeout

17681880207

Sep 3, 2021

@JimmyquSpe 不会吧....

coolcoffee

Sep 3, 2021

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

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

johnwood

Sep 3, 2021

# 1
getTableData （ e.target.value ）

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

X_Del

Sep 3, 2021

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

Yvette

Sep 3, 2021

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

Leviathann

Sep 3, 2021

改一下 getTableData，把 value 传进去？

Rocketer

Sep 3, 2021 via iPhone

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

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

mightofcode

Sep 3, 2021

用 useEffect

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

lingo

Sep 3, 2021

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

towave

Sep 3, 2021

传参最快

zhaol

Sep 3, 2021

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

wiluxy

Sep 3, 2021

~~~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

Sep 3, 2021

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

flybears

Sep 3, 2021

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

flybluewolf

Sep 3, 2021

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

Puteulanus

Sep 3, 2021

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

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

用的时候

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

Puteulanus

Sep 3, 2021

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