Question

我将一个名为Products的JS对象导出到此文件，只是为了在构建/测试时最初替换真正的API调用。我想将函数的状态设置为对象，但已映射。我的组件看起来像这样：

function App() {
  const [rooms, setRooms] = useState([]);
  const [days, setDays] = useState([]);
  const roomsMapped = products.data.map(room => ({
    id: room.id,
    title: room.title
  }))

  useEffect(() => {
    setRooms(roomsMapped);
  })

  return ( etc )

这将返回以下错误：Error: Maximum update depth exceeded。

我觉得我在这里确实缺少一些明显的东西，但是对于React和Hooks来说是很新的东西。如何在组件渲染之前设置这些数据？

Answer 1

只需将其声明为rooms的初始值

 const Component = () =>{
     const [rooms, setRooms] = useState(products.data.map(room => ({
         id: room.id,
         title: room.title
      })))
 }

您还可以使用lazy initial state来避免在每个渲染器上重新处理初始值

 const Component = () =>{
     const [rooms, setRooms] = useState(() => products.data.map(room => ({
         id: room.id,
         title: room.title
      })))
 }

Answer 2

将useEffect更改为此

useEffect(() => {
    setRooms(roomsMapped);
  },[])

Answer 3

使用Lazy initialisation作为参数useState

import React, { useState } from "react";

function App() {
  const [rooms, setRooms] = useState(() => {
    // May be a long computation initialization
    const data = products.data || [];
    return data.map(({ id, title }) => ({ id, title }));
  });

  return (
    // JSX stuffs
  )
}

Answer 4

您可以为此使用默认道具。将初始值设置为空列表。

Answer 5

您将收到“错误：超出最大更新深度”，因为useEffect函数没有依赖项数组。解决此问题的最佳方法是将空数组作为第二个参数传递给useEffect，如下所示：

useEffect(() => {
    setRooms(roomsMapped);
  },[]) <= pass empty array here

这将防止组件重新渲染，如果您希望组件在props更改时重新渲染，则可以像下面那样在数组中传递props：

useEffect(() => {
    setRooms(roomsMapped);
  },[props.props1,props.props2])

在这里您可以传递任意数量的道具...

使用React Hooks的setter，如何在组件渲染之前设置数据？

5 个答案: