У меня есть объект в файле mydata.js:

const myData = { name: 'John', lastname: 'Smith' } export default myData 

В компоненте React я импортирую этот объект и передаю его в компонент через реквизит и помещаю на страницу

 import myData from './mydata.js' const ParentComponent = () ={amp}gt; { return ( {amp}lt;ChildComponent info={myData} /{amp}gt; ) } 

Затем, например, в другом компоненте, назовем его DataChanger. Я изменил поле в объекте myData:

  import myData from './mydata.js' const DataChanger = () ={amp}gt; { const onChangeDataHandler = () ={amp}gt; { myData.name = 'David' } return ( {amp}lt;div{amp}gt; {amp}lt;button onClick={() ={amp}gt; onChangeDataHandler()}{amp}gt;Data Changer{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; ) } 

В этом случае, когда я нажимаю на кнопку и изменяю поле, у меня нет изменений в дочернем компоненте с помощью реквизита. Можно ли сделать myData реактивным?

Редактировать чудесно-Аллен-V5DDF

 // You need to use state import initialData from './mydata.js' const ParentComponent = () ={amp}gt; { const [myData, setMyData] = useState({ ...initialData }); const onChangeHandler = (newData) ={amp}gt; { setMyData({ ...myData, ...newData }); }; return ( {amp}lt;{amp}gt; {amp}lt;ChildComponent info={myData} /{amp}gt; {amp}lt;DataChanger onChangeHandler={onChangeHandler} /{amp}gt; {amp}lt;/{amp}gt; ); } // Then const DataChanger = (props) ={amp}gt; { const onButtonClick = (event) ={amp}gt; { const newData = { name: 'David' }; props.onChangeHandler(newData); }; return ( {amp}lt;div{amp}gt; {amp}lt;button onClick={onButtonClick}{amp}gt;Data Changer{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; ); }