React - 映射数组未将道具正确传递给子组件

Question

我正在制作一个仪表板组件，用于显示 HTML 片段的渲染预览和代码。在仪表板组件内部，我使用.map. 每个映射的片段都将有一个删除函数（已经构建）和一个更新函数。

为了使更新功能正常工作，每个片段都有自己的子模态组件。我需要将代码段的 ID 传递给模态组件，在那里我可以在更新数据库和状态之前将 ID 与新内容结合起来。

但是，当我将 ID 作为道具传递给模态时，我在某处犯了一个错误。

.map 在我的 Dashboard.js Dashboard 类组件中使用。

{this.state.snippets.map(snippet => (

  <>

    <div key={snippet._id} className="holder--pod">

      <div className="content">

        <div className="content__snippet-preview">

          Snippet preview

        </div>

        <div className="content__body">

          <h4>{snippet.name}</h4>

          <p>{snippet.details}</p>

          <p>{snippet._id}</p> //THIS WORKS

          <pre>

            <code>{snippet.content}</code>

          </pre>

        </div>

        <div className="content__button">

          <button onClick={this.handleDelete(snippet._id)}>

            Delete

          </button>

          <button type="button" onClick={this.showModal}>

            Open

          </button>

        </div>

      </div>

    </div>

    <Modal

      sid={snippet._id} //PASS ID HERE

      show={this.state.show}

      handleClose={this.hideModal}

    ></Modal>

  </>

))}

这将呈现下面的片段（3 个片段 pod，包括它们的数据库 ID）。

Answer 1

以下解决方案由 HMR 在评论中发起。问题是所有模态都显示出来，只有最后一个可见。通过将模态移出状态并从状态中.map更新 ID.map并将状态 ID 传递给模态内的新嵌套组件来修复。还切换到使用动态 CSS 来显示和隐藏基于状态的模式。仪表板.jsxexport default class Snippets extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props)&nbsp; &nbsp; this.showModal = React.createRef()&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; snippets: [],&nbsp; &nbsp; &nbsp; show: false,&nbsp; &nbsp; &nbsp; sid: '',&nbsp; &nbsp; }&nbsp; }&nbsp; handleDelete = id => event => {&nbsp; &nbsp; event.preventDefault()&nbsp; &nbsp; api&nbsp; &nbsp; &nbsp; .deleteSnippet(id)&nbsp; &nbsp; &nbsp; .then(result => {&nbsp; &nbsp; &nbsp; &nbsp; console.log('DATA DELETED')&nbsp; &nbsp; &nbsp; &nbsp; api.getSnippets().then(result => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({ snippets: result })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('CLIENT UPDATED')&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .catch(err => this.setState({ message: err.toString() }))&nbsp; }&nbsp; handleModal = id => {&nbsp; &nbsp; this.setState({ sid: id })&nbsp; &nbsp; this.showModal.current.showModal()&nbsp; }&nbsp; //<div id="preview">{ReactHtmlParser(snippet.content)}</div>&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; <Modal ref={this.showModal} handleClose={this.hideModal}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ModalUpdate sid={this.state.sid} />&nbsp; &nbsp; &nbsp; &nbsp; </Modal>&nbsp; &nbsp; &nbsp; &nbsp; <div className="Dashboard">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="holder">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="content__body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Dashboard</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="break"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.snippets.map(snippet => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={snippet._id} className="holder--pod">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="content__snippet-preview">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Snippet preview&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="content__body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>{snippet.name}</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>{snippet.details}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>{snippet._id}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <pre>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <code>{snippet.content}</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </pre>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="content__button">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.handleDelete(snippet._id)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Delete&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="button"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => this.handleModal(snippet._id)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Open&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; )&nbsp; }Modal.jsximport React, { Component } from 'react'export default class Modal extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props)&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; show: false,&nbsp; &nbsp; }&nbsp; }&nbsp; showModal = () => {&nbsp; &nbsp; this.setState({ show: true })&nbsp; }&nbsp; hideModal = () => {&nbsp; &nbsp; this.setState({ show: false })&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; id="Modal"&nbsp; &nbsp; &nbsp; &nbsp; style={{ display: this.state.show === true ? 'flex' : 'none' }}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <div id="modal-main">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Edit snippet </h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.props.children}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={() => this.hideModal()}>Close</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )&nbsp; }}ModalUpdate.jsximport React, { Component } from 'react'export default class ModalUpdate extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props)&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; name: '',&nbsp; &nbsp; &nbsp; details: '',&nbsp; &nbsp; &nbsp; content: '',&nbsp; &nbsp; &nbsp; message: null,&nbsp; &nbsp; }&nbsp; }&nbsp; // handleInputChange = event => {&nbsp; //&nbsp; &nbsp;this.setState({&nbsp; //&nbsp; &nbsp; &nbsp;[event.target.name]: event.target.value,&nbsp; //&nbsp; &nbsp;})&nbsp; // }&nbsp; // handleClick = id => event => {&nbsp; //&nbsp; &nbsp;event.preventDefault()&nbsp; //&nbsp; &nbsp;console.log(id)&nbsp; // }&nbsp; render() {&nbsp; &nbsp; return <h4>ID = {this.props.sid}</h4>&nbsp; }}

Answer 2

我不确定 handleDelete 函数。但更换线路应该可以解决问题<button&nbsp;onClick={()&nbsp;=>&nbsp;this.handleDelete(snippet._id)}>

Answer 3

一个潜在的问题是this.handleDelete(snippet._id)will 立即触发而不是onClick，因此您需要在事件侦听器中添加一个匿名函数：()&nbsp;=>&nbsp;this.handleDelete(snippet._id)代替this.handleDelete(snippet._id)