0

вот код:

const [getProfiles, setGetProfiles] = useState(null);

    useEffect(() => {
        async function test() {
            const profiles = () => {
                fetch('....', {
                    headers: {
                        'authorization': queryParams,
                    }
                })
                  .then(res => res.json())
                  .then(data => setGetProfiles(data))
            }
            profiles();
        }
       test();
    }, [])
const PeopleWindow = ({ fetchedUser, shareLink, getProfiles }) => {
    return (
        <div>
            <Group>
                <div className="avatar_people_container">
                    {<Avatar size={50} src={fetchedUser?.photo_100} />}
                    <div className="avatar_people">
                        {fetchedUser?.first_name + " " + fetchedUser?.last_name}
                        <span>
                            <a href="#">{"@" + fetchedUser?.id}</a>
                        </span>
                    </div>
                </div>
                <CardScroll size="m">
                    <Card mode='tint' style={{ width: '80%' }}>
                        <div className="container_card">
                            <div>
                                <Title level={3}>Пригласить друзей</Title>
                                <div className="text_invite_friends">
                                    <Text style={{ fontSize: '13px' }}>
                                        Проверьте совместимость ваших интересов
                                    </Text>
                                </div>
                            </div>
                            <Button
                                stretched
                                size="b"
                                mode="primary"
                                onClick={shareLink}
                            >
                                Пригласить друзей
                            </Button>
                        </div>
                    </Card>
                    <Card style={{ width: '80%' }}>
                        <div className="wrapper_card_donut">
                            <div className="container_card_donut">
                                <div>
                                    <Title level={3}>
                                        Платная подписка VK Donut
                                    </Title>
                                    <div className="text_donut">
                                        <Text style={{ fontSize: '13px' }}>
                                            Проверяйте совместимость без
                                            ограничений
                                        </Text>
                                    </div>
                                </div>
                                <Button stretched size="b" mode="primary">
                                    Приобрести
                                </Button>
                                <img src={donut} alt="donut" />
                            </div>
                        </div>
                    </Card>
                </CardScroll>
            </Group>
            <Group>
                <Header mode='secondary'>
                    Приглашенные друзья
                </Header>
                <Text
                  style={{
                      padding: '15px',
                      display: 'flex',
                      justifyContent: 'center',
                      color: '#818C99',
                      fontSize: '13px'
                  }}>Вы пока никого не пригласили :(</Text>
            </Group>
            <Group>
                <Header mode='secondary'>
                    Похожие пользователи
                </Header>
                <SimpleCell
                  style={{ padding: '5px 15px 5px 15px' }}
                  after={ <Avatar size={48} src={donut} /> }
                >
                    {getProfiles.map(res => console.log(res))}
                </SimpleCell>
            </Group>
        </div>
    );
};

export default PeopleWindow;

Когда я пытаюсь через пропсы перекинуть на другую панель и использовать map, мне выводит ошибку:

peopleWindow.js:91 Uncaught TypeError: Cannot read properties of null (reading 'map')
2

1 ответ 1

0

Ошибка возникает из-за того, что вы пытались использовать метод .map() для переменной, которая изначально имеет значение null.

Для устранения данной ошибки в React, есть несколько вариантов.

Вариант первый:

Начальное состояние переменной сделать пустым массивом

const [getProfiles, setGetProfiles] = useState([]);

Вариант второй

Поставить проверку на наличие данных в переменной

<SimpleCell
    style={{ padding: '5px 15px 5px 15px' }}
    after={ <Avatar size={48} src={donut} /> }
>
    {getProfiles?.map(res => console.log(res))}
</SimpleCell>

Третий вариант, задать значение по умолчанию в компоненте PeopleWindow

const PeopleWindow = ({ fetchedUser, shareLink, getProfiles = [] }) => {}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.