使用 React 时在 JavaScript 中解构答案

【问题标题】：Destructuring in JavaScript while using React使用 React 时在 JavaScript 中解构
【发布时间】：2021-09-02 18:26:54
【问题描述】：

我在尝试使用 React.js 制作 TODO 应用程序时提出了以下问题我试图为每个任务制作和更新功能。为此，我制作了一个按钮，单击时调用一个函数“update”，该函数调用作为 App.js 中定义的 prop 传递的函数，该函数遍历任务数组，找到要修改的那个并执行它的操作，然后它设置新状态

App.js

function App() {
      const [taskItems, settaskItems] = useState([]);
      const updateTask = (task,newname) =>{
    const findAndModify=()=>{
      let tasks = [...taskItems] // Why let task=taskItems doesnt work?
      for (let index = 0; index < tasks.length; index++) {
        const t = tasks[index];
        if (t.name === task.name){
          t.name = newname
        }
      }
      return tasks
    }
    settaskItems(findAndModify())
  }
}

我的 TaskRow 组件如下

<TaskRow task={task} key={task.id} toggleTask={toggleTask} updateTask={updateTask}></TaskRow>

在我的 TaskRow.js 组件的定义中，我有以下代码

export const TaskRow = (props) => {       
           const update = () => {
               const newname = "hello";
               props.updateTask(props.task, newname);
                };
                return (
    <tr key={props.task.id}>
      <td>{props.task.name}</td>
      <td>
        <input
          type="checkbox"
          checked={props.task.done}
          onChange={() => props.toggleTask(props.task)}
        />
      </td>
      <td>
        <button className="btn btn-success mx-1" onClick={update}>
          Actualizar
        </button>
      </td>
    </tr>
  );
};

问题来了，如果在 findAndModify 而不是做 let tasks = [...taskItems] 我做 task=taskItems更新任务的描述在发生另一次更改之前不会重新呈现，但如果对数据进行 console.log，它确实已被修改 这是为什么呢？ [...] 运算符与常规变量赋值有何不同？ 我研究过 JS 中的解构，但没有人谈论这个运算符的使用和 React.js 中的常规 var 赋值之间的某种区别

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

两者的区别：
(1) 方法：

let tasks = [...takItems];

(2)方法：

tasks = taksItems

是对象类型的javascript的行为（例如数组）当您将变量分配给数组时，它会创建一个引用而不是浅拷贝。

所以如果你使用(2)方法，改变tasks变量，就会体现在tasksItems中，如果你使用(1)方法，你就会有2个独立变量！

React 表示永远不要直接改变状态，就像你在使用 (2) 方法时所做的那样，并将其视为不可变类型。

【讨论】：

【解决方案2】：

为了进一步扩展，扩展运算符[...takItem] 进行了浅拷贝，这意味着它将是变量的新拷贝，但是因为它是“浅”的，所以任何嵌套的非原始数据都将是指针。例如，

const tasks = ['a', 'b', { subtask: 1 }]
const shallowCopy = [...tasks]

shallowCopy[0] = 'A'; // won't change the value of tasks
shallowCopy[2].subtasks = 'C'; // does change the values of tasks

console.log(tasks) 
// ['a', 'b', 'C']

在上面的示例中，tasks 数组中的第三项是非原始的（也称为“引用”类型），因此shallowCopy[2] 只是指向内存中与tasks[2] 相同位置的指针。 tasks[2] 和 shallowCopy[2] 都引用了同一条数据，这就是为什么当你修改 shallowCopy[2].subtasks 时它也会修改 tasks[2].subtasks

【讨论】：