Javascript 在React.js中使导入的对象成为被动对象

我在mydata.js文件中有一个对象：

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

在React组件中，我导入该对象，并通过道具将其传递到组件中，并将其放在页面上

import myData from './mydata.js'
const ParentComponent = () => {
  return (
   <ChildComponent info={myData} />
  )
}

从“./myData.js”导入myData
常量ParentComponent=（）=>{
返回(
)
}

例如，在另一个组件中，我们将其命名为DataChanger，我更改了myData对象中的一个字段：

 import myData from './mydata.js'     
 const DataChanger = () => {

  const onChangeDataHandler = () => {
    myData.name = 'David'
  }
  return (
    <div>
      <button onClick={() => onChangeDataHandler()}>Data Changer</button>
    </div>
  )
}

从“./myData.js”导入myData
常量数据转换器=（）=>{
const onChangeDataHandler=（）=>{
myData.name='David'
}
返回(
onChangeDataHandler（）}>数据转换器
)
}

在这种情况下，当我点击按钮并更改字段时，我不会通过道具更改子组件。有可能使myData成为被动的吗

//您需要使用state
从“./mydata.js”导入初始数据
常量ParentComponent=（）=>{
const[myData，setMyData]=useState（{…initialData}）；
const onChangeHandler=（newData）=>{
setMyData（{…myData，…newData}）；
};
返回(
);
}
//然后
常量数据转换器=（道具）=>{
const onButtonClick=（事件）=>{
const newData={name:'David'}；
props.onChangeHandler（newData）；
};
返回(
数据转换器
);
}

//您需要使用state
从“./mydata.js”导入初始数据
常量ParentComponent=（）=>{
const[myData，setMyData]=useState（{…initialData}）；
const onChangeHandler=（newData）=>{
setMyData（{…myData，…newData}）；
};
返回(
);
}
//然后
常量数据转换器=（道具）=>{
const onButtonClick=（事件）=>{
const newData={name:'David'}；
props.onChangeHandler（newData）；
};
返回(
数据转换器
);
}

重写你的应用程序，以便1）一个普通的父级导入

我的数据

并将其置于

状态

2）

数据转换器

调用一个prop函数来更改父级的状态（这是默认的反应模式，你不应该不必要地偏离它）我没有提到，但在我的情况下，DataChanger不是父组件的子组件，它就像（父组件和DataChanger）都在应用程序中一样。这就是为什么我提到“公共父组件”，在您的例子中是

App

。您基本上想要实现，即使这意味着通过多层组件传递状态。重写你的应用程序，以便1）一个普通的父级导入

myData

并将其置于

状态
2）
DataChanger
调用一个prop函数来更改父级的状态（这是默认的反应模式，你不应该不必要地偏离它）我没有提到，但在我的例子中，DataChanger不是父组件的子组件，它就像（父组件和DataChanger）都在应用程序中一样。这就是为什么我提到“公共父组件”，在你的例子中，它是
App
。你基本上想要实现，即使这意味着通过多层组件传递状态。更改数据的组件与显示数据的组件不同。单击处理程序函数传递clickEvent；改用
（）=>
。我不明白你的意思。调用onClick时，浏览器将click事件作为第一个参数传递。因此，在click handler函数中，
someData
对同名组件的常量进行阴影处理，并包含click事件。您不仅不需要在click handler函数中使用任何参数，而且使用
someData
会破坏它。更改数据的组件与显示数据的组件不同。您的click handler函数会传递clickEvent；改用
（）=>
。我不明白你的意思。调用onClick时，浏览器将click事件作为第一个参数传递。因此，在click handler函数中，
someData
对同名组件的常量进行阴影处理，并包含click事件。您不仅不需要单击处理程序函数中的任何参数，而且使用
someData
会破坏它。