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 来显示和隐藏基于状态的模式。

仪表板.jsx

export default class Snippets extends Component {

  constructor(props) {

    super(props)

    this.showModal = React.createRef()

    this.state = {

      snippets: [],

      show: false,

      sid: '',

    }

  }

  handleDelete = id => event => {

    event.preventDefault()

    api

      .deleteSnippet(id)

      .then(result => {

        console.log('DATA DELETED')

        api.getSnippets().then(result => {

          this.setState({ snippets: result })

          console.log('CLIENT UPDATED')

        })

      })

      .catch(err => this.setState({ message: err.toString() }))

  }

  handleModal = id => {

    this.setState({ sid: id })

    this.showModal.current.showModal()

  }

  //<div id="preview">{ReactHtmlParser(snippet.content)}</div>

  render() {

    return (

      <>

        <Modal ref={this.showModal} handleClose={this.hideModal}>

          <ModalUpdate sid={this.state.sid} />

        </Modal>

        <div className="Dashboard">

          <div className="wrapper">

            <div className="container">

              <div className="holder">

                <div className="content">

                  <div className="content__body">

                    <h3>Dashboard</h3>

                  </div>

                </div>

              </div>

              <div className="break"></div>

              {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>

                      <pre>

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

                      </pre>

                    </div>

                    <div className="content__button">

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

                        Delete

                      </button>

                      <button

                        type="button"

                        onClick={() => this.handleModal(snippet._id)}

                      >

                        Open

                      </button>

                    </div>

                  </div>

                </div>

              ))}

            </div>

          </div>

        </div>

      </>

    )

  }

Modal.jsx

import React, { Component } from 'react'

export default class Modal extends Component {

  constructor(props) {

    super(props)

    this.state = {

      show: false,

    }

  }

  showModal = () => {

    this.setState({ show: true })

  }

  hideModal = () => {

    this.setState({ show: false })

  }

  render() {

    return (

      <div

        id="Modal"

        style={{ display: this.state.show === true ? 'flex' : 'none' }}

      >

        <div id="modal-main">

          <h4>Edit snippet </h4>

          {this.props.children}

          <button onClick={() => this.hideModal()}>Close</button>

        </div>

      </div>

    )

  }

}

ModalUpdate.jsx

import React, { Component } from 'react'

export default class ModalUpdate extends Component {

  constructor(props) {

    super(props)

    this.state = {

      name: '',

      details: '',

      content: '',

      message: null,

    }

  }

  // handleInputChange = event => {

  //   this.setState({

  //     [event.target.name]: event.target.value,

  //   })

  // }

  // handleClick = id => event => {

  //   event.preventDefault()

  //   console.log(id)

  // }

  render() {

    return <h4>ID = {this.props.sid}</h4>

  }

}

Answer 2

我不确定 handleDelete 函数。但更换线路应该可以解决问题

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

Answer 3

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

() => this.handleDelete(snippet._id)

代替

this.handleDelete(snippet._id)