Блог

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

 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)
  

В функциональном компоненте нет this or this.state . Используйте перехват useState, аналогичный тому, что вы делаете несколькими строками ниже.

 export const WidgetToolbar: React.FC<{}> = () => {
    const [targetBox, setTargetBox] = useState<null | whateverTheTypeIs>(null);

    //...

}
  

Функциональные компоненты React не могут иметь состояния. Вам пришлось бы использовать компонент на основе классов, чтобы иметь состояние.

https://guide .freecodecamp.org/react-native/functional-vs-class-components/

Вы использовали перехват для «использования состояния» в этой функции: const [filter, setFilter] = useState("");

Вы могли бы сделать то же самое для targetBox , вместо того, чтобы пытаться установить свойство для несуществующего ‘this’