React点击编辑按钮传递Props至模态框组件失效求助

你的代码存在几个关键问题，导致点击编辑按钮后title无法在模态框中显示：

1. 缺少当前编辑标题的状态管理：没有维护存储当前要编辑博客标题的状态，模态框无法获取对应的值
2. 错误的模态框触发逻辑：openEditModal函数里直接返回组件不会触发模态框显示，应该通过更新状态来控制模态框的显示与内容传递
3. 变量名错误：渲染模态框时使用了未定义的modalShow，实际状态变量是show
4. 未传递title属性：渲染的模态框组件没有传入需要显示的title值

以下是修正后的完整代码：

import { useState } from 'react';
import { Modal, Button } from 'react-bootstrap';

function SecondModalComponent(props) {
    return (
        <Modal show={props.show} onHide={props.onHide}>
            <Modal.Header closeButton>
                <Modal.Title>编辑博客</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <input type="text" value={props.currentTitle} />
            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={props.onHide}>
                    关闭
                </Button>
            </Modal.Footer>
        </Modal>
    )
}

const response = [
    {
        title: "First Blog",
        description: "First Blog"
    },
    {
        title: "Second Blog",
        description: "Second Blog"
    },
    {
        title: "Third Blog",
        description: "Third Blog"
    }
]

function BlogFirstComponent() {
    // 新增状态存储当前要编辑的标题
    const [show, setShow] = useState(false);
    const [currentTitle, setCurrentTitle] = useState('');

    // 修改触发逻辑：通过更新状态打开模态框并传递标题
    const openEditModal = (title) => {
        setCurrentTitle(title);
        setShow(true);
    }

    return (
        <>
            {/* 修正变量名，传入必要的props */}
            <SecondModalComponent
                show={show}
                onHide={() => setShow(false)}
                currentTitle={currentTitle}
            />

            {response.map((data, index) => (
                // 循环渲染添加key属性，符合React规范
                <div key={index}>
                    <b>Title:</b> {data.title}
                    <br />
                    <b>Description:</b> {data.description}
                    <br />
                    <span onClick={() => openEditModal(data.title)} style={{ color: 'blue', cursor: 'pointer' }}>Edit</span>
                    <hr />
                </div>
            ))}
        </>
    )
}

export default BlogFirstComponent;

关键修改说明： #

• 新增状态变量：添加currentTitle状态保存当前点击的博客标题，点击编辑按钮时同步更新该状态并打开模态框
• 修正触发逻辑：openEditModal不再返回组件，而是通过状态更新驱动模态框显示和内容传递
• 修正变量名错误：将modalShow改为实际状态变量show
• 传递必要属性：给SecondModalComponent传入currentTitle，让模态框能获取到要编辑的标题
• 补充key属性：循环渲染的元素添加key，避免React控制台警告
• 统一描述文本：修正原代码中所有描述文本重复的问题，便于测试验证

现在点击每个博客的Edit按钮，模态框内的输入框会正确显示当前博客的标题。

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