React点击按钮调用setState不生效，编辑联系人弹窗无法弹出问题排查

1. 核心问题：子组件状态未同步父组件更新 #

你在EditContactModal中仅在组件初始化阶段把父组件传入的showEditWindow赋值给了内部state的visible，后续父组件的showEditWindow更新时，子组件的内部状态不会自动同步，这就是点击编辑按钮弹窗不显示的直接原因。

2. 次要问题：ID存储类型错误 #

你在editContact方法中写的是EditContactId: {id}，相当于把ID值包装成了对象存入state，后续拼接请求URL时${this.props.EditContactId}会被转为[object Object]，导致编辑请求出错。

修复代码 #

第一步：修改Contacts.jsx #

1. 修正editContact方法的ID赋值，新增关闭编辑弹窗的方法：

// 修正ID赋值
editContact = (id) => {
    this.setState({
        showEditWindow: true, 
        EditContactId: id // 去掉多余的大括号，直接存储ID值
    });
};
// 新增关闭弹窗方法
closeEditModal = () => {
    this.setState({
        showEditWindow: false,
        EditContactId: ''
    })
}

2. 给EditContactModal传入关闭回调：

<EditContactModal 
    reloadContacts={this.reloadContacts} 
    showEditWindow={this.state.showEditWindow}
    EditContactId={this.state.EditContactId}
    closeEditModal={this.closeEditModal}
/>

注：constructor中this.editContact = this.editContact.bind(this)是多余的，箭头函数已经自动绑定了this，可直接删除不影响运行

第二步：修改EditContactModal.jsx #

去掉冗余的内部visible状态，直接用父组件传入的prop控制弹窗显隐：

import { Button, Form, Input, Modal, Select } from "antd";
import React from "react";
import ContactForm  from './ContactForm';

const { Option } = Select;

class EditContactModal extends React.Component {
    formRef = React.createRef();
    // 删除原来内部维护的visible状态

    onFinish = (values) => {
        const url = `http://localhost:3000/contacts/${this.props.EditContactId}`;
        fetch(url, {
            method: "put",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify(values),
        })
            .then((data) => {
                if(data.ok) {
                    this.handleCancel();
                    return data.json();
                }
                throw new Error("Network error.");
            })
            .then(() => {
                this.props.reloadContacts();
            })
            .catch((err) => console.error("Error: " + err))
    };

    handleCancel = () => {
        this.props.closeEditModal();
    };

    render() {
        return (
            <Modal
                title="Edit Contact"
                visible={this.props.showEditWindow} // 直接用父组件prop控制显隐
                onCancel={this.handleCancel}
                footer={null}
            >
                <ContactForm />
            </Modal>    
        );
    }
}

export default EditContactModal;

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