Wails(React前端+Go后端)点击按钮需等后端响应再更新组件问题

你的问题核心是异步操作的时机不对：QueryBackend是调用后端的异步操作，但你在调用它之后立刻执行了setState，这时候后端还没返回数据、localStorage也未更新，组件第一次重新渲染时读取的还是旧值；第二次点击时，前一次的异步请求已完成，localStorage更新，此时setState触发的渲染才能拿到新数据。

以下是两种可行的解决方案：

方案1：等待异步操作完成后再触发渲染 #

调整QueryBackend让它返回Promise，在query函数中用async/await等待后端响应完成、localStorage更新后，再调用setState触发渲染：

function App() {
    const [state, setState] = useState(0)

    // 改为async函数，等待异步操作完成
    const query = async (_command) => {
        await QueryBackend(_command)
        // 用函数式更新state，避免依赖当前state的快照值
        setState(prevState => prevState + 1)
    }

    return (
        <div id="App">
            <div>
                <p> Hello, World! </p>
                <button onClick={() => query('SELECT CODSEN FROM NCMTAB')}>Query a Hello, World!</button>    
                <ul>
                    <DebugItem />
                </ul>
            </div>
        </div>
    )
};

// 修改QueryBackend，让它返回Promise
function QueryBackend(_command) {
    return Query(_command).then((res) => {
      localStorage.setItem('debugItems', res)
    })
};

function DebugItem() {
    var values = localStorage.getItem('debugItems') || `"empty": "empty"`
    return (
        <li>{values}</li>
    ) 
};

export default App

方案2：用React State管理数据（更推荐） #

直接把后端返回的数据存在组件的state中，React会自动在state更新时触发重新渲染，不需要额外的计数state，逻辑更清晰：

function App() {
    // 初始化时从localStorage读取数据，保证刷新页面后能保留之前的结果
    const [debugItems, setDebugItems] = useState(
        localStorage.getItem('debugItems') || `"empty": "empty"`
    )

    const query = async (_command) => {
        // 等待后端返回结果
        const res = await Query(_command)
        // 持久化到localStorage
        localStorage.setItem('debugItems', res)
        // 更新state，触发组件重新渲染
        setDebugItems(res)
    }

    return (
        <div id="App">
            <div>
                <p> Hello, World! </p>
                <button onClick={() => query('SELECT CODSEN FROM NCMTAB')}>Query a Hello, World!</button>    
                <ul>
                    {/* 直接使用state中的数据，也可以传给DebugItem组件 */}
                    <li>{debugItems}</li>
                </ul>
            </div>
        </div>
    )
};

// 如果需要保留DebugItem组件，修改为接收props：
// function DebugItem({ items }) {
//     return <li>{items}</li>
// };
// 在App中使用：<DebugItem items={debugItems} />

export default App

方案2是React的标准实践，通过state管理视图依赖的数据，避免了依赖localStorage和额外计数带来的同步问题，代码更易维护。

内容的提问来源于stack exchange，提问作者kouketsu