如何在 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 因错误而停止它）。