React中useState的set方法无报错但不生效问题求助

问题原因 #

React的useState状态更新是异步且批量处理的：

• 调用setRandomNoteId(data.noteId)后，randomNoteId不会立即更新为新值，当前函数作用域内的randomNoteId仍然保留初始的空字符串，所以你紧接着的console.log打印的是旧值。
• 最后一个.then中的navigate同样使用了未更新的旧状态，因为它和setRandomNoteId处于同一个同步执行流程中，状态还没完成更新。

解决方案 #

有两种常用的解决方式，根据你的需求选择：

方案1：直接使用API返回的data.noteId（推荐，更简洁）

既然已经从API拿到了noteId，没必要依赖状态更新，直接用这个值完成后续的打印和导航操作：

import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import { GET_RANDOM_NOTE_ID_API_RUL } from '../Constants/endpoints';

export default function useRandomNote() {
    const [randomNoteId, setRandomNoteId] = React.useState('');
    const navigate = useNavigate();

    React.useEffect(() => {
        fetch(`${process.env.REACT_APP_BACKEND_URL}/${GET_RANDOM_NOTE_ID_API_RUL}`)
            .then(response => response.json())
            .then(data => {
                console.log(data);
                console.log(`This is data.noteId: ${data.noteId}`);
                setRandomNoteId(data.noteId);
                // 直接使用data.noteId而非状态值
                console.log(`This is randomNoteId: ${data.noteId}`);
                navigate(`../notes/${data.noteId}`);
            });
    }, [navigate]) // 加入navigate到依赖数组，消除lint警告
}

方案2：监听状态变化执行后续逻辑

如果后续有其他业务逻辑需要依赖更新后的randomNoteId，可以新增一个useEffect监听状态变化：

import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import { GET_RANDOM_NOTE_ID_API_RUL } from '../Constants/endpoints';

export default function useRandomNote() {
    const [randomNoteId, setRandomNoteId] = React.useState('');
    const navigate = useNavigate();

    React.useEffect(() => {
        fetch(`${process.env.REACT_APP_BACKEND_URL}/${GET_RANDOM_NOTE_ID_API_RUL}`)
            .then(response => response.json())
            .then(data => {
                console.log(data);
                console.log(`This is data.noteId: ${data.noteId}`);
                setRandomNoteId(data.noteId);
            });
    }, [navigate])

    // 监听randomNoteId的变化，状态更新后执行导航
    React.useEffect(() => {
        if (randomNoteId) {
            console.log(`This is updated randomNoteId: ${randomNoteId}`);
            navigate(`../notes/${randomNoteId}`);
        }
    }, [randomNoteId, navigate])
}

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