React+TypeScript中异步函数执行后State未更新如何解决？

问题根源 #

你遇到的问题核心是React的useState更新是异步的：在saveAbstracts函数中，虽然你用await调用了fetchAbstracts，但fetchAbstracts里的setId(data._id)并不会立刻同步更新abstractsId变量。当你紧接着执行PUT请求时，abstractsId还是初始的空字符串，自然会拼出错误的API路径。

另外还有个隐藏问题：你直接修改entities状态数组的元素（entities[location.state.id] = ...），这违反了React状态不可变的原则，可能导致组件无法正确感知状态变化。

修复方案（最直接的实现） #

修改fetchAbstracts让它返回获取到的_id，直接在saveAbstracts中使用这个返回值，绕过异步状态更新的延迟问题，同时修正状态修改的方式：

export default function Menu() {
    const [abstracts, setAbstracts] = useState<Array<string>>([])
    const [abstractsId, setId] = useState<string>("")
    const [entities, setEntities] = useState<any>([])
    const [showMore, setShowMore] = useState<boolean>(false)
    const location = useLocation()
    const navigate = useNavigate();

    // 修改fetchAbstracts，返回获取到的_id
    const fetchAbstracts = async () => {
        const response = await fetch("http://localhost:8000/data")
        const data = await response.json()
        setAbstracts(data.abstracts)
        setEntities(data.entities)
        setId(data._id)
        return data._id; // 返回_id供直接使用
    }

    const saveAbstracts = async () => {
        // 直接拿到fetchAbstracts返回的_id，不用等状态更新
        const fetchedId = await fetchAbstracts()
        // 创建新数组修改元素，遵循React状态不可变原则
        const updatedEntities = [...entities];
        updatedEntities[location.state.id] = location.state.entities
        // 使用fetchedId拼接API路径
        await fetch(`http://localhost:8000/data/${fetchedId}`, {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ 'entities': updatedEntities })
        })
    }

    useEffect(() => {
        if (location.state?.path == "/annotate") {
            saveAbstracts()
        } else {
            fetchAbstracts()
        }
    }, [])
}

额外优化建议 #

• 给location.state加可选链判断（location.state?.path），避免页面跳转时state为空导致的报错
• 给entities定义更具体的类型，替代any，提升代码可维护性

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