React hook 使用疑惑

devzhaoyou · 2024-4-24 14:16:56 · 306 次点击
```js
const [count, setCount] = useState(0);

const fetch = () => {
  fetchMoreData(count)
};

const handleClick = () => {
  // 每次 fecth 前都要重置一下 count
  setCount(0);
  fetch()
};
```

这段代码 每次 handleClick 都要重置 count 的值为 0 ,然后使用 fetch 获取数据,fetch 会使用 count 的值;
如果上面的写法的问题是,count 在使用的时候并没有设置为 0

如果改为 useEffect 方式,如果 count 的值没有变化,又不会触发
```js
const [count, setCount] = useState(0);

const fetch = () => {
  fetchMoreData(count)
};

useEffect(() => {
  fetch();
}, [count]);

const handleClick = () => {
  // count 的值之前就是 0 ,上面的 useEffect 不触发
  setCount(0);
};
```

所以,上面的这种情况该如何处理呢? 刚接触 react 感觉很简单的逻辑,在 react 里处理起来好复杂
举报· 306 次点击
登录 注册 站外分享
23 条回复  
magicdawn 小成 2024-4-25 16:05:11
你需要一个好用的 useState hook:useRefState, 参见 https://github.com/alibaba/hooks/pull/2348#issuecomment-1794002832 , 是增加了同步支持的 ahooks.useGetState 版本,或者用 react-use.useGetSet
jackge0323 小成 2024-4-25 15:33:51
useState(() => 0)应该就可以解决了吧,使用 useState 的初始化函数。
uni 小成 2024-4-25 14:38:31
我最喜欢 react 的地方就是它一直在强制使用者用函数式的思维去思考,作为一个被各种各样的副作用强 x 多年的函数式信仰者,我总有一种大仇得报的快感
yqcode 小成 2024-4-24 20:19:38
@devzhaoyou #21 react 确实不太好做 set 后立刻 get 操作,这只是 setState 的特性而已,如果你要始终记录一个值,你可以考虑用 useRef
realJamespond 小成 2024-4-24 18:17:56
加个方法 fetchAndCount(count) 包起来用
mrwangjustsay 小成 2024-4-24 18:15:57
想研究的深一点可以参考: https://github.com/MrWangJustToDo/MyReact   https://i.imgur.com/XzEYBoY.png
zmaplex 小成 2024-4-24 17:55:25
用 swr

https://gist.github.com/zmaplex/6c4d4eacea1df7fcfccf3fe4c17f4a0a
june4 小成 2024-4-24 16:29:56
左转 solid-js ,可以 set 后马上 get, 最主要的是,视图函数只运行一次,再也没有这些操蛋的规则
mwjz 小成 2024-4-24 16:19:45
封装一个 hooks , 既有 useState 也有 useRef ,  不过还是建议用 ahook 的 useRequest
cookygg 小成 2024-4-24 15:51:28
const [count, setCount] = useState(0);

const [,update] = useState({})

const fetch = () => {
  fetchMoreData(count)
};

useEffect(() => {
  fetch();
}, [count]);

const handleClick = () => {
  // count 的值之前就是 0 ,上面的 useEffect 不触发
  setCount(0);

// 手动更新 也算一个解决
update({})
};
123下一页
返回顶部