Error: Too many re-renders. with useState

Question

我知道这个问题很多人问过，但是我试过上面提到的方法，还是不行。这是我的代码

let tmp:any = {
  "title": "Product Set",
  "type": "object",
  "properties": {
          "name": {
            "type": "string"
          },
          "age": {
            "type": "number"
          },
          "money": {
            "type": "string"
          }
        }
}


const SForm = () => {

  const { projectId } = useParams() as { projectId: string }
  const [schema , setSchema] = useState(tmp);

  async function getData(id: number) {
    const { data }  = await http.post('/project/testparam', {
    project_id: id,
  })
  
  return data.data
  }
  
 
  setSchema(getData(+projectId))


  return (
        <Form schema = {schema as JSONSchema7}
        >
        </Form>
  )
}

很多人说原因是：花括号之间的所有东西都会立即求值。使用箭头函数。

  setSchema(()=> {
    getData(+projectId)
  })

但是不行

Answer 1

您正在为每个渲染设置架构。调用 setState 挂钩会触发渲染。

具体情况如下：

intialRender -> setSchema -> re-render -> setSchema -> re-render -> ...

您可能只想为一个 projectId 获取一次架构：

const schema = useMemo(() => getData(+projectId), [getData, projectId])

Answer 2

将函数放在 useEffect 函数中，以便它运行在渲染时出现一次

useEffect(() => {

  setSchema(getData(+projectId))

}, [/* dependencies */])

依赖项框将传递参数，每次参数为 re-rendered

时都会运行 useEffect

Error: Too many re-renders. with useState

Error: Too many re-renders. with useState

reactjs

react-hooks