useState set 函数在获取后不起作用

Question

import React, {useState, useEffect, useContext} from 'react'
import AuthContext from '../context/AuthContext'

const HomePage = () => {
  const [note,setNote] = useState([])
  let {authTokens} = useContext(AuthContext)
  useEffect(()=>{
    getNotes()
  },[])

  let getNotes = async () => {
    let response = await fetch("http://127.0.0.1:8000/api/notes",{
      method:"GET",
      headers:{
        "Content-type":"application/json",
        "Authorization":"Bearer "+String(authTokens.access)
      }
    })
      let data =await response.json();
      console.log("data i have been wait",data)
      
      console.log("Data in it",note)
  }

  return (
    <div>
        <p>You are logged in to home paage</p>
        {/* {notes.map(note =>{
          <li >{note.body}</li>
        })} */}
    </div>
  )
}

export default HomePage

我从 Django 后端获取数据并尝试使用地图在 React 中显示，但它没有映射。我可以获取数据，但是当我尝试 setNote(data) 时它不起作用。有时它可以工作但仍然无法映射它。我无法刷新地图功能并在其上放置数据

我没有收到任何错误。[console.log 就像那样][1]

      console.log("data i have been wait",data)
      
      setNote(data)
      console.log("Data in it",note)```


  [1]: https://i.stack.imgur.com/h17QF.png

Answer 1

如果 setState 工作正常但您无法映射数据，我认为问题出在您在地图中放置括号但没有 return.

试试这个：

{notes.map(note =>
  {
    return(<li >{note.body}</li>);
  }
)}

或箭头函数：

{notes.map(note => <li>{note.body}</li>)}

useState set 函数在获取后不起作用

useState set function doesn't work after fetch

hook

django-rest-framework

use-state