javascript - React Modal 仅使用映射集中的最后一项

Question

我在使用 React 构建的小型应用程序中遇到了一些麻烦，我正在创建一个由根节点、子节点和孙节点组成的节点树。当我触发模态的 show 函数时，我似乎无法让 React Bootstrap 模态访问子节点的正确 id 属性。

在我的页面组件中，我将一组子节点映射到根节点。作为子节点渲染的一部分，我从父节点传递数据，然后填充一个模态，您可以从中编辑该子节点的名称。子节点的代码如下:

    import React, { Component } from 'react';
    import "./Nodes.css"
    import GrandchildNode from "./GrandchildNode"
    import EditNameForm from '../Form/EditNameForm/index';
    import { MyModal } from '../Modals';

    class ChildNode extends Component {

    constructor(props) {
      super(props)
      this.state = {
        modalId: this.props.id
      }
    }

    componentDidMount = () => {
      console.log(this.state.modalId)
    }

    render() {
      //console.log(this.state)
      let grandchildren = true;
      if (this.props.grandchildren.length === 0) {
        grandchildren = false
      }

    return (
      <div className='childWrapper'>
        <div className="childHeader">
          <div className="text" key={this.props.id}>{this.props.name}</div>
          <button className="edit" onClick={this.props.showNameEdit}>EDIT 
NAME</button>
          <button className="delete" onClick={() => 
    this.props.handleDelete(this.props.id)}>X</button>
        </div>
        <div className="childBody">
          {grandchildren ?
            this.props.grandchildren.map(item => {
              return <GrandchildNode key={item.id} name={item.name} parent= {item.parent} value={item.value}></GrandchildNode>
            }) : <div>No grandchildren to render</div>
          }
        </div>
        <MyModal
          show={this.props.showName}
          onHide={this.props.handleModalClose}
        >
          <EditNameForm
            errors={this.props.errorFields}
            handleInputChange={this.props.handleInputChange}
            name={this.props.name}
            newName={this.props.newName}
            handleModalClose={this.props.handleModalClose}
            handleFormSubmit={this.props.handleNameEdit}
            id={this.props.id}
          />
        </MyModal>
      </div>
    )
    }

    }

    export default ChildNode;

当打开模态框进行编辑时，它似乎为每个子元素渲染一次模态框，因此列表中的最后一个子元素最终成为被编辑的元素 - 例如:Child1 的 id 是“abcd”，Child2 的 id是“efgh”；当我打开模态来编辑 Child1 时，我实际上是在编辑 Child2，因为 Child2 的 id 已传递到模态中。我可以通过添加到 EditNameForm 组件中的一些代码来确认这一点:

class EditNameForm extends Component {
  state={
    id:this.props.id
  }

  componentDidMount(){
    console.log(this.state.id)
  }

console.log(this.state.id) 输出如下内容:

5c6311aa2b0593287832b0a2 EditNameForm.js:10 
5c63177d7124e5333886d91d EditNameForm.js:10 

我试图理解这里发生了什么，我有一些理论，但它们只是预感 - 任何有更多 React 经验的人，你能帮我理解 a) 这里发生了什么以及 b) 我如何设置它以便模式以正确的 id 属性打开？

Answer 1

您可以使用 React Component Lifecycle 中的 getDerivedStateFromProps 函数在您的 EditNameForm 组件中。

另外，我不确定您实际上想要将 props.id 作为 props.id 传递给您的 EditNameForm，因为这个 id 特定于父组件，并且不会在单击任何子组件时更改。此外，没有从父级传递的函数会提示您实际上更改了父级状态。

其他一些可能有助于您的开发更加顺利的提示:

• 在使用 Prop 和状态之前考虑对其进行解构

  const { errorFields, handleInputChange, name, newName, handleModalClose, handleNameEdit} = this.props;
  
  <EditNameForm
      errors={errorFields}
      handleInputChange={handleInputChange}
      name={name}
      newName={newName}
      handleModalClose={handleModalClose}
      handleFormSubmit={handleNameEdit}
      id={this.props.id}
  />
  

  • 不嵌套任何子组件的组件应立即包含起来

<GrandchildNode key={item.id} name={item.name} parent= {item.parent} value={item.value} />