在hooks中多次调用setState,会出现覆盖前面的state

#1

在线链接
fetch是公共的查询数据方法,需要独立出来
因为setState是异步的,所以在fetch里面setState的时候visible还是取的false
请问在不变动fetch方法的情况下怎么放弹窗关闭,并且更新list

#2
setState((prevState)=> {
      ...prevState,
      list: state.list.concat({ id: 3, name: "John" })
});
#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();
}, []);
#4

你对useState有点误会

#5

求各位滋醒我:grinning:

#6

setState是在类组件中使用的,useState是函数式组件使用,两个不能同时使用

#7

我知道你的问题了,你同一时间使用useState中的setState,其实因为底层都是存储在同一个hook.momriedState中,所以外面你看起来是同一时间调用了两次setState,但底层会将后一个覆盖前一个执行dispatchAction,而且你的写法本来就不合理,为啥不直接用同一个setState执行这个操作,非要执行两步setState呢。

#8

楼主,了解下concent,一个可预测、0入侵、渐进式、高性能的增强型状态管理方案,power your react!

我将你的示例用concent实现了下,你可以参考参考


逻辑清晰,组件干净,没有临时声明的闭包函数。