React - 無法獲得預先填寫的表格

Question

客觀的：

如果用戶在數據庫中保存了地址，則需要預先填寫表格。

問題：

我正在傳遞地址 object （來自登錄用戶的后端）。 ：

{
city: "CA"
line1: "testline1"
line2: "testline2"
phone: "7772815615"
pin: "1234"
state: "CA"
user: "5eea03a736b70722c83a7b63"
}

雖然我能夠控制台記錄它，但我無法在表單中預填充它（由子組件呈現）

子組件

    let addressFinalValue = {};
    const addressValue = (e) => {
        addressFinalValue[e.target.name] = e.target.value;
    };
    const propsAddress = props.address;
    const [address, setAddress] = useState(propsAddress);
    console.log(propsAddress); // < -- ABLE TO CONSOLE LOG IT 
    return (
<div>
    <div className="modal-header ">
        <h5 className="modal-title text-center">
            {address ? 'Please enter your address' : 'Please confirm your address'}
        </h5>
        <button className="close" data-dismiss="modal" aria-label="close">
            <span className="edit-order-button" aria-hidden="true">Edit order</span>
        </button>
    </div>
    <div className="container my-4">
        <form onSubmit={submitHandler}>
            {error && <p className="login-error" style={{ color: "red" }}>{error}</p>}
            <div className="form-group">
                <input id="address-line-1" className="form-control" value={propsAddress.line1}
                    onChange={addressValue} name="line1" type="text" placeholder="Line 1" />
            </div>
            <div className="form-group">
                <input id="address-line-2" className="form-control" value={propsAddress.line2}
                    onChange={addressValue} name="line2" type="text" placeholder="Line 2" />
            </div>
            <div className="form-group">
                <input id="city" className="form-control" value={propsAddress.city}
                    onChange={addressValue} name="city" type="text" placeholder="City" />
            </div>
            <div className="form-group">
                <input id="state" className="form-control" value={propsAddress.state}
                    onChange={addressValue} name="state" type="text" placeholder="State" />
            </div>
            <div className="form-group">
                <input id="pin" className="form-control" value={propsAddress.pin}
                    onChange={addressValue} name="pin" type="text" placeholder="PIN" />
            </div>
            <div className="form-group">
                <input id="phone" className="form-control" value={propsAddress.phone}
                    onChange={addressValue} name="phone" type="text" placeholder="Phone Number" />
            </div>
            <hr />
            <button className="btn btn-success">Save Address & Continue</button>
        </form>
    </div>
</div>    );

我在這里缺少什么嗎？ 我不知道那是什么。

Answer 1

我將使用以下方法實現此目的：

1. 使用 state 使子組件成為 class。 將帶有地址值的子組件傳遞給填充道具。

<ChildComponent populate={address} />

constructor(props){
  this.state = {
    ...props.populate
  }
}

handleAddressChange(e, addressItem){
    this.setState({[addressItem]: event.target.value});
}

然后，在您的表單中，將每個表單項的值設置為等於有狀態地址值。 例如：

<div className="form-group">
    <input id="address-line-1" className="form-control" value={this.state.line1}
    onChange={(e) => handleAddressChange(e, 'line1')} name="line1" type="text" placeholder="Line 1" />
</div>

確保您的onChange事件處理程序正在使用 setState 更新子組件 this.state.address 值。

查看此文件以獲取更多信息： https://github.com/ccrowley96/grocerylist/blob/master/client/src/components/AddEditModal/AddEditModal.js

我做一些非常相似的事情。