Javascript 使用useState react钩子后返回的状态变量显示。map不是函数

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

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>
  );
}

函数应用程序（）{
const[myAppointment，setmyAppointment]=useState（[]）
useffect（（）=>{
获取（'./data.json'）
.then（response=>response.json（））
。然后（结果=>{
const apts=result.map（项=>{
退货项目
})
setmyAppointment（状态=>（{…状态，
我的预约：apts
}))
})**强文本**
},[])
console.log（我的约会）
const listItem=myAppointment.map（（项目）=>{
返回(
{item.petName}
)
})
返回(
{/*{listItem}*/}
);
}

您已将状态设置为数组。但是，当您尝试更新它时，您会将其转换为一个具有键

myAppointment

的对象，这是导致错误的原因

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

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

但是，由于状态最初为空，并且您仅在initialLoad上更新它一次，因此您也可以像这样更新它

 setmyAppointment(apts);

---

问题在于获取数据后设置状态的方式

将状态设置为对象，而不是数组

让我们看一下设置状态的行

setmyAppointment（state=>（{…state，
我的预约：apts
}))

使用带有花括号的spread操作符告诉JavaScript编译器展开一个对象，显然这不是您想要的

你应该做的是用方括号代替大括号。这将告诉编译器您想要扩展一个数组

所以应该是这样的

setmyAppointment（状态=>（[…状态
]))

如果我是你，我会做一些不同的事情。 我会这样设置状态

setmyAppointment（apt）

---

我希望这有助于您的

setmyAppointment（）

调用将

myAppointment

转换为一个对象，数组使用方括号：

[…]

。您可能需要

。然后（result=>setmyAppointment（[…myAppointment，result]）

（

useState（）

创建单独的状态变量；您不必像

this.setState（）

那样使用它，您必须传递密钥：）setmyAppointment（状态=>（[…状态，myAppointment:apts]）您的意思是我应该这样写吗？您实际上可以使用

setmyAppointment（结果）

，因为您不必附加到现有数组