react setstate改变数组中的对象

Question

我有一个问题与反应我需要设置状态spesific用户当我点击按钮"succeed"它会把里面的对象改为false首先，我有一个对象数组(users)和一个名为workoutDeatils&quot的对象。在这个对象中，我有3个对象索引2上的最后一个对象叫做"锻炼"在这个锻炼中，我有一个所有锻炼的对象，我需要将其更改为特定的问题是，当我想使用用户的设置状态上的变化，它不工作(因为它得到混淆)我需要做的是:将状态更改为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不会重新渲染组件。"国家change"意味着你用一个不同于前一个的值调用setState。"different"表示与前一个不严格相等(===)。在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 }
]}
]
}
})