Почему это не функция React?
Это зависит от того, как вы ее используете. getCols() - это просто простой вызов функции, возвращающий jsx, и React интерпретирует его так. Вам нужно render, чтобы React интерпретировал его как функциональный компонент
const cols = <getCols />; // this would be a React functional component
Что еще более важно, как правильно вызывать useMemo (...)?
Первое, что нужно понять, это то, что есть два способа определения компонентов в React - функциональные компоненты или компоненты класса .
useMemo - это хук . Хуки используются для добавления логики c с отслеживанием состояния к функциональным компонентам. Компоненты класса уже имеют это с их методами жизненного цикла (например, componentDidMount, componentDidUpdate). Таким образом, хуки могут только использоваться внутри функционального компонента или другого настраиваемого хука, как упоминалось в двух полученных вами предупреждениях:
Хуки могут вызываться только внутри тела функциональный компонент.
React Hook «React.useMemo» вызывается в функции «getCols», которая не является ни функциональным компонентом React, ни пользовательской функцией React Hook
useMemo используется для запоминания значения чего-либо на основе зависимостей. Означает, что после того, как вы назначите что-то с помощью useMemo, значение / ссылка не изменится до обновления ваших зависимостей.
// `cols` will have the same value - `[ { Header: 'title ... ]`
// TILL the dependency array changes
const cols = React.useMemo(() => [
{
Header: 'title',
accessor: 'titleCol'
},
{
Header: 'body',
accessor: 'bodyCol'
},
{
Header: 'last updated',
accessor: 'updatedAtCol'
}
],
[] // <-- this is the dependency array,
// since it's empty, `cols` will only be initialized once
// if you had something like this instead
// [numberOfCols]
// i.e a variable in the dependency array,
// `cols` would update everytime `numberOfCols` updated
)
Поскольку ваш компонент Blog является компонентом класса, вы не сможете используйте крючки внутри него напрямую.
Это можно сделать двумя способами:
Метод 1: сделать блог функциональным компонентом
Преобразовать все Компонент Blog как функциональный компонент. Документы, которые вы связали, также, похоже, используют его таким образом
const Blog = () => {
// now you can use `cols` somewhere in the body of your component
const cols = React.useMemo(() => {
...
}, [])
// this will return whatever you were returning from the
// `render` function in class component
return (
// jsx for table
)
}
Метод 2: извлеките столбцы из функционального компонента
Используйте его как часть другого функционального компонента
class Blog extends Component {
createTable() {
// `cols` will be a React component now, not an array
// so probably not what you need,
// unless you want to use cols within that function
// and return the `jsx` to be rendered directly
const cols = <getCols />;
// more table creation code
return (
// jsx for table
);
}
}
Метод 3: Используйте его как настраиваемый перехватчик
Необязательно, но просто для демонстрации настраиваемого перехватчика (вам все равно понадобится преобразовать Blog в функциональный компонент)
Для документов
Пользовательский крючок - это функция JavaScript, имя которой начинается с «использовать» и которые могут вызывать другие хуки.
const useTableCols = () => {
const cols = React.useMemo(() => {
...
}, [])
return cols
}
const Blog = () => {
const cols = useTableCols()
// do something with `cols`
}