Невозможно установить состояние в компоненте реакции
У меня есть реактивный компонент. Я хочу установить состояние внутри этого компонента, которое будет передаваться дочерним компонентам. Я получаю ошибку ссылки на это, и я не уверен, почему.
export const WidgetToolbar: React.FC<{}> = () => {
this.state = {
targetBox:null,
}
const isOpen = useBehavior(mainStore.isWidgetToolbarOpen);
const themeClass = useBehavior(mainStore.themeClass);
const userDashboards = useBehavior(dashboardStore.userDashboards);
const [filter, setFilter] = useState("");
const [sortOrder, setSortOrder] = useState<SortOrder>("asc");
const userWidgets = useMemo(() => {
let _userWidgets = values(userDashboards.widgets).filter((w) => w.widget.isVisible);
if (sortOrder === "asc") {
_userWidgets.sort((a, b) => a.widget.title.localeCompare(b.widget.title));
} else {
_userWidgets.sort((a, b) => b.widget.title.localeCompare(a.widget.title));
}
if (!isBlank(filter)) {
_userWidgets = _userWidgets.filter((row) => {
return row.widget.title.toLowerCase().includes(filter.toLocaleLowerCase());
});
}
return _userWidgets;
}, [userDashboards, sortOrder, filter]);
...
Это ошибка, которую я получаю:
TypeError: Cannot set property 'state' of undefined
at WidgetToolbar (WidgetToolbar.tsx?ba4c:25)
at ProxyFacade (react-hot-loader.development.js?439b:757)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Функциональные компоненты React не могут иметь состояния. Вам нужно будет использовать компонент на основе класса, чтобы иметь состояние.
https://guide.freecodecamp.org/react-native/functional-vs-class-components/
Вы использовали хук для «использования состояния» в этой функции: const [filter, setFilter] = useState("");
Вы можете сделать то же самое для targetBox, вместо того, чтобы пытаться установить свойство для несуществующего «этого».
Использование хука setState — это не то же самое, что управление состоянием. Это больше похоже на переменную состояния codeburst.io/quick-intro-to-react-hooks-6dd8ecb898ed
Я бы сказал, что документы предполагает обратное, учитывая, что useState можно использовать вместо вызовов this.state/this.setState, а состояние сохраняется между рендерами.
@James Это определенно одно и то же, так что нет смысла мудрить. У меня сложилось впечатление, что под капотом он ведет себя немного по-другому, но я думаю, что ошибся: overreacted.io/how-does-setstate-know-what-to-do
да, я уверен, что читал объяснение Дэна Абрамова, что это намного ближе к тому, как React работает за кулисами.
В функциональном компоненте нет this или this.state. Используйте хук useState, аналогичный тому, что вы делаете несколькими строками ниже.
export const WidgetToolbar: React.FC<{}> = () => {
const [targetBox, setTargetBox] = useState<null | whateverTheTypeIs>(null);
//...
}
FWIW это верно только до React 16.8, с введением хуки вы можете иметь состояние в функциональных компонентах :)