ReactJS中父组件向子组件传递modalData失败问题求助

你遇到的核心问题有两个：一是Widget2组件没有将接收的itemDataToChild props传递给ModifyModal；二是ModifyModal中用useState初始化的content不会随父组件传递的itemDataToChild更新而同步。以下是具体修复步骤：

1. 修复Widget2的props传递 #

在App.js中，你定义的Widget2没有接收任何props，也没有将itemDataToChild传递给内部的ModifyModal，导致子组件根本拿不到数据。修改如下：

// 原代码
const Widget2 = () => <ModifyModal />;

// 修改后
const Widget2 = ({ itemDataToChild }) => <ModifyModal itemDataToChild={itemDataToChild} />;

2. 同步ModifyModal的内容与父组件props #

useState的初始值只会在组件首次渲染时生效，后续父组件更新itemDataToChild时，content状态不会自动更新。你可以根据需求选择两种方案：

方案一：直接使用props（无需本地状态） #

如果只是展示数据，不需要编辑，可以直接用父组件传递的props：

import React from "react";
import { useState } from "react";
import trash from './trash_can.png';
import './App.css'

function ModifyModal({ itemDataToChild }){
    const [hideModal, setHideModal] = useState(false);

    const handleCancel = () =>{
        setHideModal(true);
    }

    return(
        <>
        <div className={`modify-modal-container ${hideModal ? 'modify-modal-container-hide' : ''}`}>
            <div className='modify-modal'>
                <a className='modify-title'>{itemDataToChild}</a>
                <textarea className='modify-input' defaultValue={itemDataToChild} />
                    <div className='modify-buttons'>
                        <a className='modify-btn' id='modify-update-btn'>Update</a>
                        <a className='modify-btn' id='modify-cancel-btn' onClick={handleCancel}>Cancel</a>
                        <img src={trash} id='modify-delete'/>
                    </div>
            </div>
        </div>
        </>
    )
}

export default ModifyModal;

方案二：用useEffect同步状态（支持编辑） #

如果需要编辑内容，需要监听itemDataToChild的变化，实时更新本地content状态：

import React, { useState, useEffect } from "react";
import trash from './trash_can.png';
import './App.css'

function ModifyModal({ itemDataToChild }){
    const [hideModal, setHideModal] = useState(false);
    const [content, setContent] = useState(itemDataToChild);

    // 监听props变化，更新本地状态
    useEffect(() => {
        setContent(itemDataToChild);
    }, [itemDataToChild]);

    const handleCancel = () =>{
        setHideModal(true);
    }

    return(
        <>
        <div className={`modify-modal-container ${hideModal ? 'modify-modal-container-hide' : ''}`}>
            <div className='modify-modal'>
                <a className='modify-title'>{content}</a>
                <textarea 
                    className='modify-input' 
                    value={content} 
                    onChange={(e) => setContent(e.target.value)} 
                />
                    <div className='modify-buttons'>
                        <a className='modify-btn' id='modify-update-btn'>Update</a>
                        <a className='modify-btn' id='modify-cancel-btn' onClick={handleCancel}>Cancel</a>
                        <img src={trash} id='modify-delete'/>
                    </div>
            </div>
        </div>
        </>
    )
}

export default ModifyModal;

3. 优化模态框状态管理（可选但推荐） #

你当前用modal数组存储组件的方式不够合理，建议改为控制单个模态框的显示状态（如果是单模态场景），或者存储模态框数据数组（多模态场景）。以单模态为例，修改App.js的状态和渲染逻辑：

class App extends Component {
  constructor(props){
    super(props);
    this.handleCallback = this.handleCallback.bind(this);

    this.state={
      elements: [],
      showModal: false, // 控制模态框显示/隐藏
      modalData: null
    }
  }

  // ...其他方法不变

  handleCallback = (itemWidget, itemData) =>{
    this.setState({
      showModal: true,
      modalData: itemData
    });
  }

  render() { 
    const { elements, showModal, modalData } = this.state;
    return (
    <>
    <div className='page-container'>
      <div className='header'>
        <a className='header-title'>{modalData}</a>
        <a className='header-button' onClick={this.handleNewElement.bind(this)}>Create a list</a>
      </div>
      <div className='element-field'>
        {elements.length !== 0 &&
          elements.map((Widget, i) => <Widget key={i} parentCallback2={this.handleCallback}/>)}
      </div>
    </div>
          {/* 直接根据showModal状态渲染模态框 */}
          {showModal && <ModifyModal itemDataToChild={modalData} />}
    </>
    );
  }
}

这样修改后，模态框的状态管理更清晰，也避免了存储组件带来的不必要复杂度。

内容的提问来源于stack exchange，提问作者Blazing