React 功能组件 - State 已更改，组件已重新渲染但 DOM 未更新

Question

我在反应功能组件方面遇到了一个奇怪的问题。

语境

我有一个带有两个 state 对象的父组件。 在 useEffect 挂钩上，我正在调用 API 并使用接收到的响应数据设置 state，然后我正在处理带有一些属性的原始数据，并在第二个 Z9ED39E2EA931586B73A985A69EZEF5 中设置它。

在输入元素的点击事件中，我再次处理我保存在第一个 state 中的原始数据（带有另一组属性），然后将此处理后的数据设置为第二个 state ZA8CFDE6331BD59EB2AC96F8911C4B6。

所以一切都按预期工作。 State object 在初始渲染和点击事件中更新，这个 state 正在更新和组件重新渲染

但问题出在 DOM 上，DOM 没有反映这个 state 更改。 我想知道可能是什么原因。 我正在添加一些伪代码来模拟相同的场景。

function ParentComponent = () => {
  const [rawData, setRawData] = useSate({});
  const [data, setData] = useState({});

  const handleClick = ({attr: 'new attr'}) => {
    const getProcessedData = processData(rawData, { attr });
    setData(getProcessedData);
  }

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('apiurl');
      setRawData(res);
      const getProcessedData = processData(res, { attr:'process based on this attr'});
      setData(getProcessedData);
    }
    fetchData();
  }, [])

  return (<Container>
    <button onClick={() => handleClick({attr: 'new attr'})}>Click me</button>
    //Here the child component recieves the updated data on click event but its not reflecting the DOM.
    <Child data={data} /> 
  </Container>);
}

任何帮助将不胜感激。 提前致谢。