为什么更新 state 时组件不重新渲染？

Question

MultiScreens is passed an index prop that controls what it displays. Clicking Button triggers an update handler that changes the state prop that MultiScreens uses for its index. When Button is clicked state gets changed but the indexState getting passed in doesn't seem to change. How can I make MultiScreens rerender when indexState is changed?

export default function Modal() {
    const [indexState, setIndexState] = useState({idx: 0});
    
    const onIncrement = (e) => {
        let newIndexState = {
            idx: indexState.idx + 1
        }
        setIndexState(newIndexState)
    }

  return (
        <>
            <MultiScreens index={indexState}/>
            
            <Button onClick={onIncrement}>
                increment index
            </Button>
        </>
  );
}

Answer 1

I was overriding the index inside MultiScreen.