使用 React Hooks 的 setter，如何在組件呈現之前設置數據？

Question

我將一個名為 Products 的 JS object 導出到這個文件，只是為了在我構建/測試時替換一個真正的 API 調用。 我想將函數的 state 設置為 object，但已映射。 我的組件看起來像這樣：

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

您還可以使用惰性初始 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

使用 function 作為useState的參數進行Lazy initialisation

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

您可以將默認道具用於 this.set 具有空列表的初始值。

Answer 5

您收到“錯誤：超出最大更新深度”，因為您的 useEffect function 沒有依賴數組。 解決此問題的最佳方法是將空數組作為第二個參數傳遞給 useEffect，如下所示：

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

這將阻止組件重新渲染，如果您希望組件在道具更改時重新渲染，您可以像這樣傳遞數組中的道具：

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

在這里，您可以傳遞任意數量的道具...