使用 Hooks 响应 InputForm 值

Question

I am a bit new to hooks, and I can't seem to get my FormControl value to display its value correctly after being changed, the value stays the same on the page.

However I can see that customerNameChanged is being called and customer object is being updated correctly in state, but the value used on the FormControl does not update.

I don't understand why, but I assume it is because the value is a property of an object. Can anyone explain further?

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

This was the solution, thanks to @Ibz for the answer!

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