Как отобразить реквизит в React, который представляет собой массив объектов

Question

Я пытаюсь передать массив объектов в MenuPage из приложения. js. Если карты нет, я могу утешить пропущенную мною activities. Но когда я пытаюсь запустить карту, я получаю сообщение об ошибке, и console.log больше не может определить activities prop, но вместо этого я получаю несколько console.logs пустых массивов.

Кроме того, это правильно, чтобы мой activities рендерился динамически? Раньше у меня было состояние activities на MenuPage. js, но всякий раз, когда я добавлял новое действие, мне приходилось обновлять sh, чтобы появилось новое добавленное действие. Поэтому я решил попытаться переместить его в его родительский файл, который является приложением. js.

сообщение об ошибке, когда карта

Ошибка: слишком много повторных визуализаций. React ограничивает количество рендеров, чтобы предотвратить бесконечное l oop.

Журнал консоли 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)

MenuPage. 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} />)

naked useStates всегда вызывает бесконечные рендеры

Также всегда имеет смысл перемещать источник данных как можно ближе, поскольку страница App.js на самом деле не использует его, а передает его дочерним компонентам.

Вы можете переместить useEffect в MenuPage после исправления оператора return, и он должен работать как положено.

Страница меню. 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 Node (ie: элемент JSX), но вы ничего не возвращаете.

Вы получаете ошибку, потому что вы вызываете setActivity() при каждом рендере, вызывая перерисовывать каждый раз (пока React не остановит его с ошибкой).