Question

我像这样的名为“ external-data.js”的文件中有一个数据数组

``
export const mydata = [
  {
    name: "john",
    age: 20,
    man: true
  },
  {
    name: "julia",
    age: 22,
    man: false
  }
];
``

然后我将数据导入我的'reactjs'应用程序中，然后尝试像这样对它进行破坏

``  
import React, {component} from 'react';
import { mydata } from 'external-data.js';

class HumanApp extends Component {
  
   state = {
     myNewData: [...mydata]
   }
   
   componentDidMount() {
    this.changeData();
   }

   const changeData = () => {
     myNewData.map(item => item.name = 'boyka');
     console.log("state Data: "+myNewData[0].name); 
     console.log("original Data:"+Mydata[0].name);
   }
  
   render() {
     return (
      ....
     );
   }
 };

export default HumanApp;
``

然后我希望得到：“ state Data：boyka”和“ original data：john”，但似乎我的changeData函数也更改了原始数组，并且我得到了“ original data：boyka”

Answer 1

state = {
    myNewData: [
        ...mydata.map(data => { ...data })
    ]
}

Answer 2

去那里：

import React, { Component } from "react";
import { mydata } from "./external-data.js";

class App extends Component {
  state = {
    myNewData: [...mydata]
  };

  componentDidMount() {
    this.changeData();
  }

  changeData = () => {
    this.setState(
      (prevState) => {
        const myNewData = { ...prevState.myNewData };
        this.state.myNewData.forEach((item) => {
          item.name = "boyka";
        });
        return {
          myNewData
        };
      },
      () => {
        console.log(this.state.myNewData);
      }
    );
  };

  render() {
    return <div>Hii</div>;
  }
}

export default App;

您不能直接改变状态！！您需要像上例一样使用useState()来更改状态。

如何在不更改数据的情况下将数据复制到状态

2 个答案: