Блог

Главная - Вопросы по программированию - Необработанное отклонение (ошибка): Отрисовано больше крючков, чем во время предыдущего рендеринга (грандстек интерфейса реакции с ApolloClient)

Необработанное отклонение (ошибка): Отрисовано больше крючков, чем во время предыдущего рендеринга (грандстек интерфейса реакции с ApolloClient)

#reactjs #react-hooks #apollo #react-table #grandstack

Вопрос:

У меня есть ошибка, которая всегда возникает, когда я обновляю свою страницу (на локальном хосте) Я использую интерфейс GrandStack React на основе базы данных Neo4J и хотел создать таблицу с фильтрами данных. Я использовал код, найденный прямо здесь (полный код на CodeSandbox прямо здесь)

И это прекрасно работает до тех пор, пока я не использую свои данные (используя ApolloClient).

Я объявляю следующий запрос в начале:

 const GET_INSTANCE = gql`
  {
    finalTab {
      classObject
      object
      classSubject
      subject
      relation
    }
  }
`

Затем я определяю данные const и возвращаю следующую таблицу

   const { loading, error, data } = useQuery(GET_INSTANCE)
  return (
    <Paper>
      {loading amp;amp; !error amp;amp; <p>Loading...</p>}
      {error amp;amp; !loading amp;amp; <p>Error</p>}
      {data amp;amp; !loading amp;amp; !error amp;amp; (
        <Table
          columns={columns}
          data={React.useMemo(() => data.finalTab, [])}
        />
      )}
    </Paper>
  )

Он действительно работает и компилируется, но как только я обновлю страницу, появится следующая ошибка :

Необработанный отказ (ошибка): Отрисовано больше крючков, чем во время предыдущей отрисовки.

И это указывает на эту линию : data={React.useMemo(() => data.finalTab, [])}

ИЗМЕНИТЬ : Я также попытался объявить данные перед инструкцией return следующим образом:

   const { loading, error, data } = useQuery(GET_INSTANCE)
  if (error) return <p>error</p>
  if (loading) return <p>Loading...</p>
  const instances = data.finalTab
  const data1 = React.useMemo(() => instances, [])

И тогда только вернем стол :

   return <Table columns={columns} data={data1} />

но я все равно получаю ошибку

И я, кажется, не могу понять, что я сделал не так, может кто-нибудь помочь ? Большое спасибо

Ответ №1:

   const { loading, error, data } = useQuery(GET_INSTANCE)
  const finalTab = React.useMemo(() => data.finalTab, [])
  return (
    <Paper>
      {loading amp;amp; !error amp;amp; <p>Loading...</p>}
      {error amp;amp; !loading amp;amp; <p>Error</p>}
      {data amp;amp; !loading amp;amp; !error amp;amp; (
        <Table
          columns={columns}
          data={finalTab}
        />
      )}
    </Paper>
  )

useMemo это хук, который необходимо инициализировать, прежде чем что-либо возвращать.

Комментарии:

1. Спасибо за ответ, но я не совсем уверен, что понимаю, что вы имеете в виду, когда я просматриваю useMemo в документации React, я не вижу никакого синтаксиса для инициализации useMemo, как я могу инициализировать этот крючок ?

2. При использовании крючков: useEffect / useCallback / useMemo и т. Д… Так всегда должно быть, прежде чем что-либо возвращать. или вы получите ошибку в своем названии. Просто поместите свой useMemo ниже вашего useQuery (как в моем примере).

3. Из документации react вы не можете использовать хук с условным оператором. reactjs.org/docs/hooks-overview.html#rules-of-hooks Вот почему вы должны положить свои крючки, прежде чем что-то возвращать.

Метки: ,