@yaverm

React: Как перебросит данные из объекта на другой компонент?

Добрый день, столкнулся с проблемой передача данных с объекта на другие компоненты.

5e4d1cd2c26ee182615249.png

const data = [
    {
        link: 'User 1',
        text: ' Lorem ipsum dolor sit amet, consectetur adipisicing elit.,
        id: '1',
        img: '',
        position: 'Web Developer',
    },
    {
        link: 'User 1',
        text: ' Lorem ipsum dolor sit amet, consectetur adipisicing elit.,
        id: '2',
        img: '',
        position: 'Web Developer',
    },
    {
        link: 'User 2,
        text: ' Lorem ipsum dolor sit amet, consectetur adipisicing elit.,
        id: '3',
        img: '',
        position: 'Web Developer',
    }
    ];


Router

<Switch>
                    <Route exact path="/messages" component={AppMessages}/>
                    <Route path="/messages/chat" component={AppMessageItems}/>
                    <Route path={["/messages/chat", "/messages/chat/:id"]} component={AppMessageItems} />

</Switch>


Как на изб отображено при клике на Messages переходит в компонент AppMessages, после я с помощью map() достаю мне нужные ключи ( link ) и отображаю их и могу передать мне нужные данные из объекта

const AppMessages = () => {
    return (
        <Container>
            <AppChatList>
                {data.map(function(item, index) {
                    return (
                        <li key={index}>
                            <Link to={`/messages/chat/${item.id}`}>
                                <AppMessageUserList {...item} />
                            </Link>
                        </li>);
                })}
            </AppChatList>
        </Container>
    );
};


Но, при клике на линк переходит в компонент AppMessageItems где нужно так же отображать данные из того же объекта. Вот тут я столкнулся с проблемой как мне правильно передать данные

const AppMessageItems = (props) => {
    const { text } = props;
        return (
            <Container>
                <div>
              ID: { id}
</div>
            </Container>
        )
};
  • Вопрос задан
  • 528 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Dartess
Если у вас одни и те же данные шарятся между разными страницами, эти данные вполне сойдут за глобальное состояние приложения.

Есть несколько способов его хранить и менять:

а) хранить данные в контексте и получать их и метод для их изменения путём подключения к контексту (см. useContext или contextType, в зависимости от функциональности/классовости компонента).
б) использовать сторонние решения для управления состоянием. На выбор redux, mobx, effector и прочие библиотеки.
Ответ написан
@paoluccio
Можно поместить data в контекст, ну и обращаться где захочется с помощью useContext.

И тогда получится что-то такое:
const AppMessageItems = () => {
  const { id } = useParams(); // react-router-dom hook
  const subset = useContext(YourContextName).find(item => item.id === id);

  return (
    <Container>
      <div> Id: {subset.id}</div>
      <div> Text: {subset.text}</div>
      ... 
    </Container>
  );
};
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
05 апр. 2020, в 10:15
2500 руб./за проект
05 апр. 2020, в 10:13
400 руб./за проект
05 апр. 2020, в 09:51
3000 руб./за проект