Хук React setState не работает при попытке очистить / очистить / удалить / вернуть в исходное состояние - PullRequest
Новая
       103

Хук React setState не работает при попытке очистить / очистить / удалить / вернуть в исходное состояние

0 голосов
/ 13 июля 2020

У меня есть функция clearState, которая устанавливает некоторые хуки useState обратно в их исходное состояние при нажатии кнопки перезапуска. Однако они говорят, что мой setState не является функцией. Пожалуйста, проверьте код ниже:

Приложение. js

...
const [question, setQuestion] = useState(0);
const [response, setResponse] = useState({});
const [answer, setAnswer] = useState({});
const [answerId, setAnswerId] = useState({});
...

Модальное. js

const Modal = ({
  setResponse,
  setAnswer,
  setAnswerId,
  setQuestion,
  setAnswerNameArr,
}) => {
  const [open, setOpen] = useState(false);

  const clearState = () => {
    setOpen(false); //works
    setQuestion(0); //works
    setAnswer({}); //does not work
    setAnswerId({});
    setResponse({});
    setAnswerNameArr([]);
  };

...

  return (
    <Modal
       ...
    >
      ...
        <Button
           onClick={()=>handleSubmit()}
        >
           Restart
        </Button>
    </Modal>
  );
};

export default Modal;

Ошибка: 

Uncaught TypeError: setAnswer is not a function

Заранее спасибо.

1 Ответ

0 голосов
/ 13 июля 2020

Похоже, вы не передаете свои хуки настройки состояния в <Modal>, поэтому они недоступны.

В любом случае это не лучшая идея, tbh. Если вам нужен дочерний элемент, чтобы повлиять на состояние родителя, было бы лучше передать один обратный вызов: 

const Modal = ({
      onSubmitCb
}) => {
  const [open, setOpen] = useState(false);

  const clearState = () => {
    setOpen(false); //works
    setQuestion(0); //works
    onSubmitCb && onSubmitCb()
  };

...

  return (
    <Modal>
      ...
        <Button
           onClick={()=>handleSubmit()}
        >
           Restart
        </Button>
    </Modal>
  );
};

и в родительском: 

const App = ()=>{
    const clearState = () => {
        setAnswer({});
        setAnswerId({});
        setResponse({});
        setAnswerNameArr([]);
  };
  
  .... 

  return {
      <Modal ... onSubmitCb={clearState} />
   }
}
...