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

V2EX = way to explore

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

现在注册

已注册用户请登录

这是一个创建于 1160 天前的主题，其中的信息可能已经有所发展或是发生改变。

页面上有一个 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 条回复 • 2021-09-05 22:18:40 +08:00

JimmyquSpe

2021-09-03 14:01:27 +08:00 via Android

settimeout

17681880207

2021-09-03 14:03:34 +08:00

@JimmyquSpe 不会吧....

coolcoffee

2021-09-03 14:04:28 +08:00

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

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

johnwood

2021-09-03 14:04:32 +08:00

# 1
getTableData （ e.target.value ）

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

X_Del

2021-09-03 14:04:56 +08:00

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

Yvette

2021-09-03 14:09:17 +08:00

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

Leviathann

2021-09-03 14:16:29 +08:00

改一下 getTableData，把 value 传进去？

Rocketer

2021-09-03 14:19:04 +08:00 via iPhone

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

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

mightofcode

2021-09-03 14:20:06 +08:00

用 useEffect

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

lingo

2021-09-03 15:04:44 +08:00

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

towave

2021-09-03 15:18:27 +08:00

传参最快

zhaol

2021-09-03 15:27:19 +08:00

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

wiluxy

2021-09-03 15:29:27 +08:00

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

2021-09-03 16:08:01 +08:00

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

flybears

2021-09-03 16:09:02 +08:00

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

flybluewolf

2021-09-03 16:19:29 +08:00

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

Puteulanus

2021-09-03 17:31:20 +08:00

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

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

用的时候

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

Puteulanus

2021-09-03 17:33:28 +08:00

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