Почему мой компонент, который получает реквизиты, не работает, когда я деструктурирую свойства, но когда я использую props.key, он работает? - PullRequest
Новая
       9

Почему мой компонент, который получает реквизиты, не работает, когда я деструктурирую свойства, но когда я использую props.key, он работает?

4 голосов
/ 19 июня 2019

Проблема

У меня есть приложение, которое использует этот React Redux Boilerplate: https://github.com/flexdinesh/react-redux-boilerplate

Я создал новую страницу, которая подключена к впрыскиваемому редуктору +сага.Я получаю следующие реквизиты: posts, loading, error, loadPosts и match

Когда я использую их напрямую, приложение работает как положено.Но как только я начинаю деструктурировать реквизит, приложение ведет себя неожиданно.

Особенно с реквизитом match.

Когда я делаю это так: 

const SubforumPage = (props) => {
      useEffect(() => {
        const { id: subId } = props.match.params;
        console.log('props: ', subId);
      }, []);
    // .... other code
    }

Нет проблем, все работает.

Но когдаЯ делаю это так: 

const SubforumPage = ({match}) => {
  useEffect(() => {
    const { id: subId } = match.params;
    console.log('props: ', subId);
  }, []);
// .... other code
}

match внезапно становится неопределенным!

У меня действительно нет ни малейшего понятия о том, почему это происходит.Это первый раз, когда я вижу такую ​​ошибку.

Эта конкретная страница настроена следующим образом в файле маршрутизации:

<Route path="/sub/:id" component={SubforumPage} />

И она явно работает при использовании (props) в аргументах функции, но не с({match})

Почему это?Может кто-нибудь помочь мне здесь.

Что я пробовал?

  • Я продолжал разрушать одну опору за другой.Сначала этот подход работает, и он все еще не определен, но когда я добираюсь до некоторых реквизитов, он отличается от того, какие из них перестанут работать.1056 * крючок?Я передаю пустой массив, чтобы он просто запускался при монтировании.Кажется, что когда я обновляю страницу, сообщения очищаются, но useEffect больше не запускается, поэтому новые сообщения не извлекаются.Потому что курица также console.log внутри useEffect hook undefined даже не работает.Но, например, опора loading в console.log вне useEffect действительно не undefined (но это все еще не объясняет, почему она работает с (props) в качестве аргумента).

    Япросто используете useEffect не так?

    Большое спасибо

1 Ответ

0 голосов
/ 19 июня 2019

Хорошо, ребята, это была моя вина. Думаю, я слишком устал: D. Вот что вызвало проблему:

Я получаю свой пост в хуке useEffect. Я также рендеринг компонента, где я передаю в posts. Но сообщения недоступны, потому что компонент должен ждать поступления данных. Поэтому я полностью забыл, что должен ждать данных.

До:

return <PostsGroup posts={posts} />;

После: (правильно)

return <PostsGroup posts={posts || []} />;

У меня был чек на месте, похожий на этот:

if (loading) return <CircularProgress />;

(до другого возвращения). Но это не имеет значения, потому что загрузка ложна, когда компонент изначально визуализируется. Поэтому я также установил начальное значение от loading до true (в моем initialState редуктора). Теперь у меня есть две проверки.

Извините, ребята. Так глупо.

...