react.js中的setState之后不呈现组件。

Question

我正在尝试根据特定状态有条件地渲染组件。下面的代码位于另一个文件上的映射中。我有一个打开的设定台，每当用户单击“注释”按钮时，它应该将OpenState设置为true。但是，当我单击注释按钮时，它不会打开模式。模态通过open = {open}的道具，我仍然没有打开它。

这是我想知道的代码

  const { blog, idx, id } = props


  const [open, setOpen] = useState({});
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);


  return (
    <>
      <div className="blogBox" id={id} key={idx}>
        <h4>{blog.title}</h4>
        <hr />
        <p>{blog.body}</p>
        <hr />
        <p id="postedBy">Posted By: Claude @ {blog.createdAt}</p>
        <hr />
        <button className="btn btn-info" onClick={handleOpen}>Comment</button>
        <HandleNoteModal open={open} onClose={handleClose} />
        <hr />
        <div className="comment Section">
          <span>User 1:</span>
          <span> Comment one</span>
          <br />
          <span>User 2:</span>
          <span> Comment two</span>
        </div>
      </div>
    </>
  )

}

是否需要传递另一个组件内的道具，并在此文件中传递它。我的＆lt; handlenotemodal /＆gt; < /code>组件是在另一个文件上创建的，然后导入。

为了安全保持和时间，这是我的HandlenoteModal组件的代码。

  const { handleClose } = props
  const [noteState, setNoteState] = useState({
    user: '',
    note: ''
  });

  const handleInputChange = ({ target: { name, value } }) => {
    setNoteState({ ...noteState, [name]: value });
  };

  
  return (
    <div className="modal" tabIndex="-1">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">Leave a Comment</h5>
            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div className="modal-body">
            <form>
              <div className="mb-3">
                <label htmlFor="note" className="form-label">Comment:</label>
                <textarea name="note" className="form-control formBody" placeholder="Enter comment here" onChange={handleInputChange} required />
              </div>
              <button type="submit" className="btn btn-primary">Send</button>
            </form>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal" onClick={handleClose}>Close</button>
          </div>
        </div>
      </div>
    </div>

  )
} ```

Answer 1

我认为对于你的情况，你不需要传递 open 属性来验证打开或关闭该模式组件

你只需对你的上部组件进行条件检查，如下所示

{open && <HandleNoteModal onClose={handleClose} />}

这是它在你的中的样子代码

const { blog, idx, id } = props


  const [open, setOpen] = useState({});
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);


  return (
    <>
      <div className="blogBox" id={id} key={idx}>
        <h4>{blog.title}</h4>
        <hr />
        <p>{blog.body}</p>
        <hr />
        <p id="postedBy">Posted By: Claude @ {blog.createdAt}</p>
        <hr />
        <button className="btn btn-info" onClick={handleOpen}>Comment</button>
        {open && <HandleNoteModal onClose={handleClose} />}
        <hr />
        <div className="comment Section">
          <span>User 1:</span>
          <span> Comment one</span>
          <br />
          <span>User 2:</span>
          <span> Comment two</span>
        </div>
      </div>
    </>
  )

}