在线链接
fetch是公共的查询数据方法,需要独立出来
因为setState是异步的,所以在fetch里面setState的时候visible还是取的false
请问在不变动fetch方法的情况下怎么放弹窗关闭,并且更新list
在hooks中多次调用setState,会出现覆盖前面的state
Sayid1
#1
oyb81076
#2
setState((prevState)=> {
...prevState,
list: state.list.concat({ id: 3, name: "John" })
});
oyb81076
#3
不过在此建议, 你不要吧多个state堆在一起,如果要放一起,你就用 useReducer
这里的话
const [visible, setVisible] = useState(false);
const [data, setData] = useState([]);
还有你的代码写的真的不忍直视
const [visible, setVisible] = useSate(false);
const [data, setData] = useState([
{id: 1, name: "Jack"},
{id: 2, name: "Tom"}
]);
const fetch = useState(()=> {setData(x=> x.concat([{id: x.length + 1, name: "New"}]))}, [])
const showModal = useCallback(()=> setVisible(true), []);
const handleCancel = useCallback(()=> setVisible(false), []);
const handleOk = useCallback(() => {
setVisible(false);
fetch();
}, []);
chenzhaolong
#7
我知道你的问题了,你同一时间使用useState中的setState,其实因为底层都是存储在同一个hook.momriedState中,所以外面你看起来是同一时间调用了两次setState,但底层会将后一个覆盖前一个执行dispatchAction,而且你的写法本来就不合理,为啥不直接用同一个setState执行这个操作,非要执行两步setState呢。
楼主,了解下concent,一个可预测、0入侵、渐进式、高性能的增强型状态管理方案,power your react!
我将你的示例用concent实现了下,你可以参考参考
逻辑清晰,组件干净,没有临时声明的闭包函数。