Question

当我尝试映射调用useEffect钩子后返回的状态变量时，此代码给我错误。在控制台上，当我打印myAppointment时，它显示两个值，一个是空（[]），另一个是（Array [25]），我想从此array中提取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>
  );
}

Answer 1

您要声明为数组。但是，当您尝试对其进行更新时，会将其转换为具有键myAppointment的对象，这是导致错误的原因。

您必须像更新状态一样

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

但是，由于状态最初是空的，并且只在initialLoad的useEffect中对其进行了一次更新，因此您也可以像这样

 setmyAppointment(apts);

Answer 2

问题出在获取数据后您设置状态的方式。

您正在将状态设置为对象而不是数组。

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

setmyAppointment(state=>({...state,
          myAppointment:apts
        }))

使用带有大括号的spread运算符告诉JavaScript编译器扩展对象，显然这不是您想要的。

您应该使用方括号代替花括号。这将告诉编译器您要散布数组。

所以应该是这样的。


setmyAppointment(state=>([...state
        ]))

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

setmyAppointment(apt)

我希望这会有所帮助

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

2 个答案: