如何在 React 中映射一個 prop，它是一個對象數組

Question

我正在嘗試將一組對象從 App.js 傳遞到我的 MenuPage。 如果沒有地圖，我可以控制台記錄我通過的activities道具。 但是，當我嘗試運行地圖時，出現錯誤並且 console.log 無法再識別activities道具，而是收到多個空數組的 console.logs。

另外，這是使我的activities動態呈現的正確方法嗎？ 我曾經在 MenuPage.js 上有activities狀態，但是每當我添加新活動時，我都必須刷新才能顯示新添加的活動。 因此，我決定嘗試將其移動到其父文件 App.js 中。

映射時的錯誤消息

錯誤：重新渲染過多。 React 限制渲染次數以防止無限循環。

如果沒有地圖，則activities道具的控制台日志

{getActivities: Array(5)}
    getActivities: Array(5)
        0: {id: "5e64abc6de157e027c1fc224", name: "Test1", location: "Test1", activityDate: "Test1", description: "Test1", …}
        1: {id: "5e69b103dd9e0b20f8636da9", name: "Test234", location: "Test2", activityDate: "Test2", description: "Test2", …}
        2: {id: "5e6a744eca11a3355cdde03b", name: "test3", location: "test3", activityDate: "test3", description: "test3", …}
        3: {id: "5e6a74c9be805e042057b3b1", name: "test4", location: "test4", activityDate: "test4", description: "test4", …}
        4: {id: "5e6a74e4be805e042057b3b2", name: "test5", location: "test5", activityDate: "test5", description: "test5", …}
        length: 5
__proto__: Array(0)

菜單頁.js

const MenuPage = ({activities}) => {
    const [activity, setActivity] = useState([])

    console.log(activities)

    setActivity(activities.map( (activity) => <ActivityItem activity={activity} />))

應用程序.js

const App = () => {
    const [activities, setActivities] = useState([])

    useEffect( () => {
        GQLClient({}).request(Query.getActivities, null).then( ({getActivities}) => {
            setActivities({getActivities})
        })
    }, [])

    const Load = (props, page) => {
        if (user.token === null) return <Redirect to="/login" />

        if (page === 'LogoutPage') {
            unsetUser()
            return <Redirect to="/login" />
        }

        switch (page) {
            case 'MenuPage': return <MenuPage activities={activities} />

            default:
        }
    }

    return (
        <BrowserRouter>
            <AppNavbar />
            <Switch>
                <Route exact path='/register' component={ RegisterPage } />
                <Route exact path='/login' component={ LoginPage } />
                <Route exact path='/' render={ (props) => Load(props, 'MenuPage') } />
            </Switch>
        </BrowserRouter>
  )
}

Answer 1

當您在組件內使用setState您會看到無限渲染。

setActivity(activities.map( (activity) => <ActivityItem activity={activity} />))

當它遇到它時，它會重新渲染組件，此時它將在下一次渲染時再次運行到上述狀態。

只需將其刪除，因為您已經可以訪問組件上下文中的activities ，而只需從組件返回即可。

return activities.map( (activity) => <ActivityItem activity={activity} />)

裸 useStates 總是導致無限渲染

此外，將數據源移動到盡可能近的位置總是有意義的，因為App.js頁面並沒有真正使用它，而是將其傳遞給子組件。

修復 return 語句后，您可以將useEffect移至MenuPage ，它應該可以按預期工作。

菜單頁.js

const MenuPage = ({activities}) => {
    const [activities, setActivities] = useState([])

    // This only causes a re render once when the component is mounted
    // as the dependency list is empty
    useEffect( () => {
        GQLClient({})
           .request(Query.getActivities, null)
           .then( ({getActivities}) => {
              setActivities({getActivities});
         })
    }, [])

    console.log(activities)

    return (
       activities.map( (activity) => <ActivityItem key={activity.id} activity={activity} />
    );
}

Answer 2

除非缺少某些代碼， MenuPage組件無法工作。 你必須返回一個 React 節點（即：一個 JSX 元素），但你沒有返回任何東西。

你得到的錯誤是因為你在每次渲染時調用setActivity() ，每次都會觸發重新渲染（直到 React 因錯誤而停止它）。