`setTableData`这样的设置状态的方法是同步还是异步的呢？

Question

我在使用useState的时候，没有设置上state还是怎么的，打印state是空数组：

  const {projs, getProjs } = useStore()

  const [tableData, setTableData] = useState<DispProjs[]>([]);

  useEffect(() => {
    
    console.log('before: ', projs)   // 有数据： [{...}]
    setTableData(projs);
    console.log('after ', tableData)  // 无数据：[]
  }, [projs]);

对此有几个问题：
1、setTableData这样的设置状态的方法是同步还是异步的呢？
2、请问是否有方式可以看到状态实时的情况。比如浏览器有redux的devtool，但是在electron是否可以什么方式展示呢？

Answer 1

1. useState 和 useEffect 都是异步的，所以 setTableData 执行后不能立即获取到状态更新后的值。
   如果想看到更新可以尝试

    useEffect(() => {
    console.log('before: ', projs);
    setTableData(projs);
    }, [projs]);
   
    useEffect(() => {
    console.log('after: ', tableData);
    }, [tableData]);

2. Electron 内置了浏览器工具，在创建 windows 实例的时候配置就行

    const { app, BrowserWindow } = require('electron');
   
    function createWindow() {
    const win = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        devTools: true, // 配置开发者工具
      },
    });
   
    win.loadFile('index.html');
    }
   
    app.whenReady().then(createWindow);

   也可以直接安装 redux-devtools-extension

参考
redux-devtools-extension