使用 Hooks 響應 InputForm 值

Question

我對鈎子有點陌生，我似乎無法讓我的 FormControl 值在更改后正確顯示其值，該值在頁面上保持不變。

但是，我可以看到正在調用 customerNameChanged，並且正在 state 中正確更新客戶 object，但 FormControl 上使用的值沒有更新。

我不明白為什么，但我認為這是因為該值是 object 的屬性。 誰能進一步解釋？

export default function Customer(props) {

    const { match } = props;
    const [loading, setLoading] = useState(true);
    const [customer, setCustomer] = useState({});
    const [params] = useState(match.params);

    useEffect(() => {
        async function load() {
            const customer = await loadCustomer(params.id);
            setCustomer(customer.data);

            setLoading(false);
        }
        load();
    }, [])

    function customerNameChanged(event) {
        customer.name = event.target.value;
        setCustomer(customer);
    }

    function renderCustomer() {
        return (<div>
            <InputGroup className="mb-3">
                <InputGroup.Prepend>
                    <InputGroup.Text id="basic-addon1">Name</InputGroup.Text>
                </InputGroup.Prepend>
                <FormControl
                    placeholder="Name"
                    aria-label="CustomerName"
                    aria-describedby="basic-addon1"
                    value={customer.name}
                    onChange={customerNameChanged}
                />
            </InputGroup>
        </div>)
    }

    return (<Card><LoadedContent isLoading={loading} content={renderCustomer()} /></Card>)
}

Answer 1

這是解決方案，感謝@Ibz 的回答！

function customerNameChanged(event) {
    setCustomer({ ...customer, name: event.target.value });
}