尝试 clear/empty/delete/set 回到初始状态时，React setState 挂钩不起作用

Question

我有一个 clearState 函数，可以在单击重启按钮时将一些 useState 挂钩设置回它们的初始状态。但是，他们说我的 setState 不是函数。请检查以下代码：

App.js

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

Modal.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

提前致谢。

Answer 1

您似乎没有将状态设置挂钩传递给 <Modal>，因此它们不可用。

无论如何，这样做不是一个好主意，tbh。如果您需要 child 来影响 parent 的状态，最好传递一个 call-back:

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>
  );
};

在你的 parent:

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

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

尝试 clear/empty/delete/set 回到初始状态时，React setState 挂钩不起作用

React setState hook is not working when trying to clear/empty/delete/set back to initial state

javascript

typeerror

setstate

reactjs

use-state