Блог

Главная - Вопросы по программированию - Состояние передачи между родительским и дочерним компонентами в React/Typescript

Состояние передачи между родительским и дочерним компонентами в React/Typescript

#reactjs #typescript

Вопрос:

Я немного запутался в том, как обновить состояние между родительским и дочерним компонентами. Я знаю, что состояние должно быть поднято, поэтому я добавил его в родительский компонент. Поэтому я хочу обновить логическое значение в дочернем компоненте(можно ли это сделать?). Я попробовал, как показано ниже, но получил ошибку: Cannot invoke an object which is possibly 'undefined'. This expression is not callable.Type 'Boolean' has no call signatures.

Пример Стакблица: https://stackblitz.com/edit/react-ts-hzssfh?file=Child.tsx

Родитель

 import React from 'react';
import Child from '../components/Child';

const Parent: React.FunctionComponent = () => {

const [visible, setVisible] = React.useState<boolean>(false);

    const toggle = () => {
        setVisible(!visible);
    };

   return (
      <button onClick={toggle}>toggle</button>
      <Child visible={visible} /> 
   )
};

export default Parent;

Ребенок

 import React from 'react';

interface Icomments {
visible?: boolean;
}

const Child: React.FunctionComponent<Icomments> = (props: Icomments) => {

    const handleClick = () => {
         props.visible(false);
    };

     return (
        <button onClick={handleClick}>Hide</button>
     )

}

export default Child;

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

1. Отображается логическое значение. Вы хотели передать setVisible это ребенку?

2. Да, это правильно

Ответ №1:

Ребенку нужна функция, которая задает состояние, а не значение состояния. Поэтому вам нужно передать Ребенку setVisible функцию опоры.

 <Child setVisible={setVisible} />
 
 const Child = ({ setVisible }) => (
  <button onClick={() => { setVisible(false); }}>Hide</button>
);

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

1. Похоже, вы все еще путаете штат и сеттера штата — убедитесь, что вы передаете и ссылаетесь только на сеттера штата (the setVisible ), а не на штат, который вас не волнует.

2. Я не думаю, что вы правильно скопировали код из моего ответа — он не выдает ошибку, которую вы описываете.

3. Да, я знаю — и правильная передача установщика состояния и вызов его с false помощью не приводит к ошибке. Ошибка может возникнуть только в том случае, если вы все еще путаете состояние и задатчик состояния, например, если вы делаете <Child setVisible={visible} /> вместо этого. (передайте сеттеру штата, а не государству)

4. Да, ваш интерфейс также должен совпадать — опять же, вам нужно передать только задатчик состояния , а не состояние, и ссылаться на этот задатчик состояния (the Dispatch<SetStateAction<boolean>> ) везде, где он используется — не состояние, логическое значение, которое вас не волнует.

5. Вы все еще говорите TypeScript, что передаете логическое значение, а не задатчик состояния: setVisible?: boolean; передайте и везде указывайте задатчик состояния вместо состояния. Задатчиком состояния может быть либо (newVisible: boolean) => void или Dispatch<SetStateAction<boolean>>

Метки: