对数组对象数组内的setstate更改对象做出反应

Question

我的反应有问题，当我单击“成功”按钮时，我需要设置一个特定的用户，它会将里面的对象更改为 false，这是 deatils 首先我有一个对象（用户）数组和一个名为“workoutDeatils”的对象在这个对象里面我有 3 个对象索引 2 上的最后一个对象在这个锻炼里面被称为“锻炼”我有一个所有锻炼的对象，当我想在更改中使用用户的 setstate 时，我需要更改它，特别是问题它不起作用（因为它会感到困惑）我需要做的是：将状态更改为 false 这个我知道但我将如何使用地图设置用户状态？ 它应该是嵌套循环吗？

import HomePage from "./componente/HomePage";
import React, { useState } from "react";
import WorkoutDeatilsField from "./componente/WorkoutDeatilsField";
import SpesificUser from "./componente/SpesificUser";
import Workout from "./componente/Workout";
import { BrowserRouter, Route, Routes } from "react-router-dom";
function App() {
  const [users, setUsers] = useState([]);
  const [spesificUserId, setSpesificUserId] = useState(0);
  const [spesificWorkOut, setSpesificWorkout] = useState();
  const spesificUser = users.find((user) => {
    return user.id == spesificUserId;
  });
  const getWorkoutDeatils = () => {
    const { workout } = spesificUser.workoutDeatils[2];
    const spesificWorkoutPlane = workout.find((workout) => {
      return workout.workoutNum == spesificWorkOut;
    });
    return spesificWorkoutPlane;
  };

  const findUserExists = (id) => {
    const checkUserExists = users.filter((user) => {
      return user.id == id;
    });

    return checkUserExists.length !== 0 ? true : false;
  };

  const addUser = (id, fullName, gender) => {
    const user = {
      id: id,
      fullName: fullName,
      gender: gender,
    };

    setUsers((prev) => {
      return [...prev, user];
    });
  };
  const setTraning = (trainWeek, trainInYears) => {
    const workoutInWeeks = new Array(Number(trainWeek)).fill(1);
    let kmcacluator = (trainInYears * 5) / trainWeek;

    const workoutDeatils = [
      {
        trainWeek: Number(trainWeek),
      },
      { trainYears: Number(trainInYears) },
      {
        workout: workoutInWeeks.map((workout, index) => {
          kmcacluator = kmcacluator + (kmcacluator / 100) * 15;
          return { workoutNum: index + 1, km: Math.ceil(kmcacluator), status: true };
        }),
      },
    ];

    const afterMap = users.map((user) => {
      return user.id == spesificUserId ? { ...user, workoutDeatils } : { ...user };
    });
    setUsers(afterMap);
  };
const get = ()=>{
  const afterMap = users.map((user)=>{
  })
}
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route
            path="/"
            element={
              <HomePage findUserExists={findUserExists} addUser={addUser} setSpesificUserId={setSpesificUserId} />
            }
          ></Route>
          <Route
            path="/workoutdeatilsfield"
            element={<WorkoutDeatilsField spesificUser={spesificUser} setTraning={setTraning} />}
          ></Route>
          <Route
            path="/traning/:id"
            element={<SpesificUser setSpesificWorkout={setSpesificWorkout} spesificUser={spesificUser} />}
          ></Route>
          <Route path="/workout" element={<Workout getWorkoutDeatils={getWorkoutDeatils} />}></Route>
        </Routes>
      </BrowserRouter>

      <button
        onClick={() => {
          console.log(users);
        }}
      >
        Click
      </button>
    </div>
  );
}

export default App;



{
    "id": "1",
    "fullName": "dsa",
    "gender": "male",
    "workoutDeatils": [
        {
            "trainWeek": 3
        },
        {
            "trainYears": 2
        },
        {
            "workout": [
                {
                    "workoutNum": 1,
                    "km": 4,
                    "status": true
                },
                {
                    "workoutNum": 2,
                    "km": 5,
                    "status": true
                },
                {
                    "workoutNum": 3,
                    "km": 6,
                    "status": true
                }
            ]
        }
    ]
}

这是一个如何添加用户及其详细信息的示例

Answer 1

如果状态没有改变，React 的setState不会重新渲染组件。 “状态更改”意味着您调用setState时的值与前一个值不同。 “不同”意味着它与前一个不严格相等（ === ）。 在 JavaScript 中，对象是通过引用进行比较的，因此要使用setState更改对象，您必须设置一个新对象。

值得庆幸的是， setState可以接收一个函数，该函数采用先前的状态并计算下一个状态，当您想要更新对象的嵌套属性时，这对您的用例特别有用。 这里的关键是你必须声明一个新对象并将旧对象的所有数据放入新对象中，只更改你想要更改的值。 使用一些扩展 ( ... ) 和数组方法 ( filter , find )，您可以轻松地切换第三次训练的状态。

    const workoutNum = 3 // Or whatever workout you want to change
    
    setUser(previous => {
      const workoutToChange = previous.workoutDetails[2].workout
        .find(d => d.workoutNum === workoutNum)
    
      return {
        ...previous,
        workoutDetails: [
          ...previous.workoutDetails.filter(details => !details.workout),
          { workout: [
            ...previous.workoutDetails[2].filter(w => w.workountNum !== workoutNum),
            { ...workoutToChange, status: !workoutToChange.status }
          ]}
        ]
      }
    })