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

Question

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

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

Answer 2

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

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

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

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

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

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

所以应该是这样的。


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

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

setmyAppointment(apt)

希望对您有所帮助

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

The state variable returned after using useState react hook shows .map is not a function

javascript

jsx

reactjs

map-function