Reactjs 未使用嵌套状态更新输入值

我已经搜索了很多，但是我找不到一个在状态有嵌套对象的情况下工作的React Hooks示例。我一直在跟踪。我创建了一个分数计算器组件示例，其中我希望在任何一个输入字段发生更改时重新计算结果：

import React, { useState } from 'react';

const initialState = {
    numerator: {
        value: 1
    },
    denominator: {
        value: 2
    }
};

export const Fraction = () => {
    const [elements, setElements] = useState(initialState);

    function changeNumerator(val) {
        elements.numerator.value = parseInt(val);
        setElements(elements);
    }

    function changeDenominator(val) {
        elements.denominator.value = parseInt(val);
        setElements(elements);
    }

    function calcResult(num, denom) {
        if (denom === 0) return;
        
        return num / denom;
    }

    return <div>
        <input 
            value = {elements.numerator.value}
            onChange = {e => changeNumerator(e.target.value)}
        />

        /

        <input 
            value = {elements.denominator.value}
            onChange = {e => changeDenominator(e.target.value)}
        />

        = 

        <b>{calcResult(elements.numerator.value, elements.denominator.value)}</b>
    </div>
}

---

我错过了什么？以这种嵌套方式组合状态是错误的吗？

分子

和

分母

应该分开吗？在我的实际例子中，结构将更加复杂；我知道我可以通过不以这种方式构造状态使这个特定的示例更简单，但我正在专门寻找如何处理嵌套对象，除非有令人信服的理由我不应该这样做。

由于对象指针没有更改，React不会触发另一个渲染

更改此项：

function changeNumerator(val) {
    elements.numerator.value = parseInt(val);
    setElements(elements);
}

为此：

function changeNumerator(val) {
    setElements({
      ...elements,
      numerator: {
        value: parseInt(val, 10),
      },
    });
}

并对另一个函数执行相同的操作。 通过这种方式，您可以创建一个新对象，并且React将识别更改

function changeNumerator(val) {
    setElements({
      ...elements,
      numerator: {
        value: parseInt(val, 10),
      },
    });
}