为什么我在react中得到"setShowModal未定义“错误消息？

Question

我的守则：

import React, { useState } from "react";
import Modal from "./Modal";

function showModal() {
 setShowModal(true);
}

export default function NewPost() {
const [showModal, setShowModal] = useState(false);
if (showModal) {
return (
  <h1>
    <Modal />
  </h1>
);
 }

return (
<div className="new-post">
  <button onClick={showModal} type="button" className="new-post-form">
    Was machst du gerade, Toni?
  </button>
  <div className="options">
    <i style={{ color: "red" }} className="fas fa-stream"></i>
    <p className="option">Live-Video</p>
    <i style={{ color: "green" }} className="fas fa-camera"></i>
    <p className="option">Foto/Video</p>
    <i style={{ color: "yellow" }} className="fas fa-smile"></i>
    <p className="option">Gefühl/Aktivität</p>
  </div>
</div>
);
}

我得描述更多..。(Stackoverflow消息) .................................................................................................

Answer 1

您可以将showModal函数放入NewPost并重命名showModal函数。

    import React, { useState } from "react";
    import Modal from "./Modal";
    
    
    export default function NewPost() {
    const [showModal, setShowModal] = useState(false);

     function newShowModal() {
      setShowModal(true);
    }

    if (showModal) {
    return (
      <h1>
        <Modal />
      </h1>
    );
     }
    
    return (
    <div className="new-post">
      <button onClick={showModal} type="button" className="new-post-form">
        Was machst du gerade, Toni?
      </button>
      <div className="options">
        <i style={{ color: "red" }} className="fas fa-stream"></i>
        <p className="option">Live-Video</p>
        <i style={{ color: "green" }} className="fas fa-camera"></i>
        <p className="option">Foto/Video</p>
        <i style={{ color: "yellow" }} className="fas fa-smile"></i>
        <p className="option">Gefühl/Aktivität</p>
      </div>
    </div>
    );
    }

Answer 2

因为setShowModal是在NewPost组件中定义的，所以它在组件之外不可用，只需将showModal函数放在组件中即可。

还可以重命名showModal函数，因为它已经由useState钩子定义