反应获取状态值

Question

我有两个不同的 API URL。我可以使用 /api/current_user 获取当前用户的 ID 并保存到“currentuser”状态。我想从 MySQL 中获取所有 当前用户的 。我的 API URL 有效。但是我无法使用 currentuser 状态变量获取。

此 link returns 当前用户的 ID。有效。

  useEffect(()=>{
    
    fetch('http://localhost:8000/api/current_user/', {
      headers: {
        Authorization: `JWT ${localStorage.getItem('token')}`
      }
    })
      .then(res => res.json())
      .then(json => {
        setCurrentuser(json.id);
      });
  
  
},[])

然后我想在 currentuser 状态下使用该 ID。

 Axios.request({
      method: 'POST',  
      url: 'http://localhost:3001/api/post',
      data: {
        curus: `${currentuser}`     // I'm trying to use currentuser state on here.
      },
     })

    .then(response => {
      return response.data;
  })
    .then(data => {
      let tmpArray2 = []
      const tmpArray = []
bla bla bla ...

最终请求负载 returns curus: ""

所以它有一个空值。我可以在 return 函数中使用这个状态值。

这也是我的节点服务器的 index.js:

app.post('/api/post', (req, res) => {
    const currentt = req.body.curus
    const sqlSelect = "SELECT * FROM messagestable WHERE sender='" + currentt + "' OR recipient ='" + currentt + "' ";
    db.query(sqlSelect, (err, result) => {
        res.send(result);
        console.log(currentt)
    });

})

我想获取来自 MySQL 的所有消息，但只针对当前用户。不是所有用户的消息。你能帮帮我吗？非常感谢！

Answer 1

您不能连续调用 fetch 和 Axios.request，因为 setCurrentuser 是异步的，而当您在 Axios.request 中使用 currentuser 时，您不会知道 currentuser 是否有最后一个值。

最好将 fetch 和 Axios.request 分成 2 个 useEffect 这样：

useEffect(()=>{  //<-- this will be fired on component's loading
    
    fetch('http://localhost:8000/api/current_user/', {
      headers: {
        Authorization: `JWT ${localStorage.getItem('token')}`
      }
    })
      .then(res => res.json())
      .then(json => {
        setCurrentuser(json.id);
      });
  
  
},[]) 

useEffect(() => { //<-- this one will be fired every time you change currentuser and will contains the very last value of currentuser
  Axios.request({
  method: 'POST',  
  url: 'http://localhost:3001/api/post',
  data: {
    curus: `${currentuser}`
  },
 })

.then(response => {
  return response.data;
})
.then(data => {
  let tmpArray2 = []
  const tmpArray = []
  bla bla bla ...

}, [currentuser])

反应获取状态值

React Fetch with State Value

fetch

reactjs

axios

react-hooks