javascript - 在 React.js 中使导入的对象具有反应性

Question

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

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

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

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

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

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

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

在这种情况下，当我单击按钮并更改字段时，我没有通过道具更改子组件。是否可以使 myData 具有反应性？

标签： javascriptreactjs

Answer 1

// You need to use state

import initialData from './mydata.js'

const ParentComponent = () => {
    const [myData, setMyData] = useState({ ...initialData });
    const onChangeHandler = (newData) => {
        setMyData({ ...myData, ...newData });
    };
    return (
        <>
            <ChildComponent info={myData} />
            <DataChanger onChangeHandler={onChangeHandler} />
        </>
    );
}

// Then
const DataChanger = (props) => {
    const onButtonClick = (event) => {
        const newData = { name: 'David' };
        props.onChangeHandler(newData);
    };
    return (
        <div>
            <button onClick={onButtonClick}>Data Changer</button>
        </div>
    );
}