MySQL插入后可正常打印insertId但赋值给React state为空如何解决

• React状态更新为异步批量更新机制：调用setPageId后，React不会立刻更新当前作用域下的pageId变量，而是将更新任务加入队列，等当前同步代码全部执行完成后才会批量更新状态、触发组件重渲染。所以你在then回调里刚调用setPageId就打印pageId，拿到的永远是更新前的旧值，并不是赋值失败，只是读取状态的时机不对。
• 后端代码存在小缺陷：返回响应时存在重复调用res.send/res.json的问题，同时异常分支没有加return终止代码执行，可能会触发服务端报错。

方案1：直接用获取到的insertId完成跳转（推荐） #

你的最终需求是拿到新页面ID完成跳转，不需要先存state再读取，直接在请求回调里用拿到的insertId执行跳转即可，示例如下：

// 先从react-router导入useNavigate
const navigate = useNavigate();

Axios.post("backendurl/api/insertpage" , {
  name: name,
  Link: Link,
})
.then((results) => {     
  if (results.data.insertId) {
    // 直接用接口返回的id跳转，不需要依赖state
    navigate(`/page/${results.data.insertId}`)
  } else if (results.data.message) {
    console.log("插入失败")
  }
})

方案2：如果需要将ID存入state做其他用途，监听state变化执行逻辑 #

如果你确实需要把ID存在state里后续使用，可以用useEffect监听pageId的变化，等状态更新完成后再执行后续操作：

const [pageId, setPageId] = useState(null);
const navigate = useNavigate();

// 监听pageId变化，状态更新后自动执行回调
useEffect(() => {
  if(pageId) {
    console.log("更新后的pageId：", pageId)
    // 此处执行跳转或其他逻辑
    navigate(`/page/${pageId}`)
  }
}, [pageId, navigate])

// axios请求回调内只需要赋值state即可
Axios.post("backendurl/api/insertpage" , {
  name: name,
  Link: Link,
})
.then((results) => {     
  if (results.data.insertId) {
    setPageId(results.data.insertId)
  }
})

后端代码优化 #

修复重复返回响应、无终止执行的问题：

app.post('/api/insertpage', (req, res) => {
    const name = req.body.name;
    const Link = req.body.Link;
    const sqlInsert = "INSERT INTO pages (name, Link) VALUES (?,?);";   
    
    db.query(sqlInsert, [name, Link], (err, results) => {
        if (err) {
            console.log("the error is:" + err);
            return res.send({ err: err });        
        }
        if (results.insertId) {
            console.log(results);
            console.log(results.insertId);
            return res.json({ insertId: results.insertId })
        } else {
            return res.send({ message: "not working"});
        }
    })
});

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