javascript - 使用 useState react hook 后返回的状态变量显示 .map 不是函数

Question

当我尝试映射调用 useEffect 钩子(Hook)后返回的状态变量时，这段代码给我错误。在控制台上，当我打印 myAppointment 时，它显示两个值，一个为空 ([])，另一个 (Array[25]) 我想从这个数组中提取 petname 值。但是出现错误“ map 不是函数”请调查并帮助我!

function App() {
  const [myAppointment, setmyAppointment] = useState([])
  useEffect(() => {
      fetch('./data.json')
      .then(response=> response.json())
      .then(result=>{
        const apts=result.map(item=>{
          return item
        })
        setmyAppointment(state=>({...state,
          myAppointment:apts
        }))
      })**strong text**
  },[])

  console.log(myAppointment)
  const listItem = myAppointment.map((item)=>{
    return(
      <div>{item.petName}</div>
    )
  })

  return (
    <main className="page bg-white" id="petratings">
    <div className="container">
      <div className="row">
        <div className="col-md-12 bg-white">
          <div className="container">
            {/* {listItem} */}
            <div><AddAppointment /></div>
            <div><SearchAppointment /></div>
            <div><ListAppointment /></div>
          </div>
        </div>
      </div>
    </div>
  </main>
  );
}

Answer 1

你有你的状态作为一个数组。但是，当您尝试更新它时，您会将其转换为具有键 myAppointment 的对象，这是导致错误的原因。

你必须像这样更新你的状态

  setmyAppointment(state=> [...state, ...apts]);

然而，由于状态最初是空的，你只在 useEffect on initialLoad 中更新一次，你也可以像这样更新它

 setmyAppointment(apts);