React hook 使用疑惑

[devzhaoyou]

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 的值没有变化，又不会触发

const [count, setCount] = useState(0);

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

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

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

所以，上面的这种情况该如何处理呢？ 刚接触 react 感觉很简单的逻辑，在 react 里处理起来好复杂

[devzhaoyou]

感谢各位，已理清，确实应该通过传值的方式来解决，函数应该尽量不访问外部 state ，有点函数式编程的思想。
同时也确定了一个事情，react 确实不太好做 set 后立刻 get 操作
另外编程思想真得变一变

[devzhaoyou]

@wuyiccc #16 是的，正确的路子

[mwjz]

封装一个 hooks ， 既有 useState 也有 useRef ， 不过还是建议用 ahook 的 useRequest

[june4]

左转 solid-js ，可以 set 后马上 get, 最主要的是，视图函数只运行一次，再也没有这些操蛋的规则

[zmaplex]

用 swr

https://gist.github.com/zmaplex/6c4d4eacea1df7fcfccf3fe4c17f4a0a

[zmaplex]

import { useState } from 'react';
import useSWR from 'swr';

const fetchMoreData = async (count: number) => {
await new Promise((resolve) => setTimeout(resolve, count * 100));
return count
}

export default function Demo() {
const [count, setCount] = useState(0);
const { data, error, isLoading } = useSWR(`count-${count}-swr`, async () => {
if (count == 5) {
throw new Error("count is 5")
}
return await fetchMoreData(count)
})

const handleClick = () => {
setCount(0);
};

if (isLoading) return <div>Loading...</div>
if (error) return <div>{`${error}`}</div>

return (<div >
<div>{data}</div>

<button onClick={() => setCount(count + 1)}>+</button>

<button onClick={handleClick}>handleClick</button>
</div>)

}

[mrwangjustsay]

想研究的深一点可以参考： https://github.com/MrWangJustToDo/MyReact

[realJamespond]

加个方法 fetchAndCount(count) 包起来用

[yqcode]

@devzhaoyou #21 react 确实不太好做 set 后立刻 get 操作，这只是 setState 的特性而已，如果你要始终记录一个值，你可以考虑用 useRef

[uni]

我最喜欢 react 的地方就是它一直在强制使用者用函数式的思维去思考，作为一个被各种各样的副作用强 x 多年的函数式信仰者，我总有一种大仇得报的快感

[jackge0323]

useState(() => 0)应该就可以解决了吧，使用 useState 的初始化函数。

[magicdawn]

你需要一个好用的 useState hook：useRefState, 参见 https://github.com/alibaba/hooks/pull/2348#issuecomment-1794002832 , 是增加了同步支持的 ahooks.useGetState 版本，或者用 react-use.useGetSet