组件未在React.js中的setState之后呈现

Question

我试图根据特定状态有条件地呈现组件。下面的代码在另一个文件的映射中。我的setState常量为open，每当用户单击"comment"按钮时，它都应该将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>
</>
)
}

我想知道我是否需要在其他组件中传递道具，以及在这个文件中传递它。我的<HandleNoteModal />组件是在另一个文件上创建的，然后导入。

为了安全起见，下面是我的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>
</>
)
}