React中Bootstrap编辑地址模态框首次点击加载默认状态问题求助

你的组件出现首次点击模态框为空、第二次才正常显示地址的问题，核心原因如下：

• setValues异步特性：React的setValues是异步更新状态，调用后立即访问values仍为旧的空值，此时你手动设置DOM输入框值用的是更新前的状态，导致首次点击UI不更新；第二次点击时state已完成更新，因此能显示正确内容。
• 手动操作DOM破坏数据流：React受控组件的UI应由state驱动，你通过document.getElementById直接修改输入框值，打破了React的状态管理逻辑，造成state与UI不一致。
• 模态框ID重复冲突：多个EditAddress实例使用同一个editModal ID，Bootstrap无法区分对应关系，引发交互异常。

1. 移除所有手动操作DOM的代码，完全依赖state驱动受控组件。
2. 放弃data-target自动触发模态框，改为手动控制模态框显示，确保state更新后再打开模态框。
3. 基于index生成唯一的模态框ID，避免多个实例冲突。
4. 移除addressFill中多余的await（user.address是同步数据，无需异步等待）。

import React, { useContext, useState, useRef } from 'react'
import { API } from './backend';
import { userContext } from './contexts/userContext'

const EditAddress = ({index}) => {
  console.log("component rerendered")
  const [values,setValues] = useState({
    name:"",
    address:"",
    state:"",
    pincode:"",
    phonenumber:""
  })

  const {name,address,state,pincode,phonenumber} = values;
  const {user,setUser} = useContext(userContext);
  // 用ref获取模态框DOM元素，手动控制显示
  const modalRef = useRef(null);

  let _id;

  const addressFill = () => {
    // user.address是同步数据，无需await
    const addressArr = user.address;
    const targetAddress = addressArr[index];

    // 直接更新state，无需手动操作DOM
    setValues({
      name: targetAddress.name,
      address: targetAddress.address,
      state: targetAddress.state,
      pincode: targetAddress.pincode,
      phonenumber: targetAddress.phonenumber
    })

    // state更新后手动打开模态框
    $(modalRef.current).modal('show');
  }

  if(user){
    _id = user._id;
  }

  const handleChange = (event,name)=>{
    setValues({...values,[name]: event.target.value})
  } 

  const handleSubmit = async()=>{
    try{ 
      const middle = await fetch(`${API}/address/add`,{
        method:'PUT',
        headers:{
          Accept:'application/json',
          "content-type":'application/json'
        },
        body:JSON.stringify({
          _id,
          address:values        
        })
      })

      const response = await middle.json();

      setUser(response)
      setValues({ 
        name:"",
        address:"",
        state:"",
        pincode:"",
        phonenumber:""
      })

      // 提交后关闭模态框
      $(modalRef.current).modal('hide');
      console.log(response);
    }
    catch(error)
    {
      console.log(error);
    }
 }

const form = ()=>{
  return  <form>
    <div className="form-group">
      <label for="exampleInputEmail1"><b>Full name (First and Last name)</b></label>
      <input type="text" className="form-control" value={name} id={`name-${index}`} aria-describedby="emailHelp" onChange={(e)=>handleChange(e,"name")}/>
    </div>
    <div className="form-group">
      <label for="exampleFormControlTextarea1"><b>Address Details</b></label>
      <textarea type='' className="form-control" value={address} id={`address-${index}`} placeholder="Apartment,unit,building,floor,etc."  onChange={(e)=>handleChange(e,"address")}></textarea>
    </div>

    <div className="form-group">
      <label for="exampleInputEmail1"><b>State / Province / Region</b></label>
      <input type="text" className="form-control" value={state} id={`state-${index}`} aria-describedby="emailHelp"  onChange={(e)=>handleChange(e,"state")}/>
    </div>

    <div className="form-group">
      <div className='row'>
        <div className='col-sm-6'>
          <label for="exampleInputEmail1"><b>PIN Code</b></label>
          <input type="number" className="form-control" value={pincode} id={`pincode-${index}`} aria-describedby="emailHelp"  onChange={(e)=>handleChange(e,"pincode")}/>
        </div>
        <div className='col-sm-6'>
          <label for="exampleInputEmail1"><b>Phone number</b></label>
          <input type="number" className="form-control" value={phonenumber} id={`phonenumber-${index}`} aria-describedby="emailHelp"  onChange={(e)=>handleChange(e,"phonenumber")}/>
        </div>
      </div>
    </div>
  </form>
}

  return (
    <>
      <button type="button" className="btn btn-primary ml-1" onClick={addressFill}>
        Edit address 
      </button>

      {/* 生成唯一ID，用ref绑定模态框 */}
      <div className="modal fade" id={`editModal-${index}`} ref={modalRef} tabindex="-1" role="dialog" aria-labelledby={`exampleModalLabel-${index}`} aria-hidden="true" >
        <div className="modal-dialog" role="document">
          <div className="modal-content" >
            <div className="modal-header bg-warning">
              <h5 className="modal-title" id={`exampleModalLabel-${index}`}>Enter Address 🏠</h5>
              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body">
              {form()}
            </div>
            <div className="modal-footer">
              <button type="button" data-dismiss="modal" className="btn btn-primary" onClick={handleSubmit}>Submit</button>
            </div>
          </div>
        </div>
      </div>
    </> 
  )
}

export default EditAddress

• 使用useRef获取模态框DOM元素，通过$(modalRef.current).modal('show')手动控制模态框显示，确保state更新后再打开模态框。
• 移除了addressFill中所有手动操作DOM的代码，完全依赖state驱动受控组件的value属性。
• 基于index生成唯一的模态框ID、输入框ID，避免多个组件实例的DOM元素冲突。
• 移除了await user.address的多余代码，因为user是context中的同步状态。
• 提交表单后手动关闭模态框，提升用户体验。

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