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

Question

[stepbystep]

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

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>
        )
};

Answer 1

[Dartess]

Если у вас одни и те же данные шарятся между разными страницами, эти данные вполне сойдут за глобальное состояние приложения.

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

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

Comments

[stepbystep]

Спасибо за ответ, как раз решил подключить Redux

[Dartess]

Тогда советую сразу посмотреть в сторону redux-toolkit. Redux очень многословен и заставляет писать много однообразного кода, redux-toolkit решает эту проблему. Тулза официальная и рекомендуется к использованию разработчиками.

Answer 2

[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>
  );
};