#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 Вот почему вы должны положить свои крючки, прежде чем что-то возвращать.