如何在 object 中更新 array in react useState Hook

Question

我正在尝试在 React 中创建一个嵌套的动态表单。 我的目标是能够动态地向表单添加天数以及一天内的练习。

这是我的 state 的样子：

const [formFields, setFormFields] = React.useState({
    name: '',
    price: '',
    duration: '',
    description: '',
    daysPerWeek: '',
    allExercises: [
      {
        day: 'Monday',
        exercises: [
          {
            name: '',
            sets: '',
            reps: '',
            link: '',
          },
        ],
      },
    ],
  });

我可以用这种方法添加新的一天

function addDay() {
    const newDay = {
      day: '',
      exercises: [
        {
          name: '',
          sets: '',
          reps: '',
          link: '',
        },
      ],
    };
    setFormFields((prev) => ({
      ...prev,
      allExercises: [...prev.allExercises, newDay],
    }));
  }

但是我想要一个按钮，它只会在特定的一天内填充练习数组。

Answer 1

你应该能够做这样的事情：

setFormFields((prev) => ({
  ...prev,
  allExercises: prev.allExercises.map(x => {
    if (x.day !== 'Tuesday') {
      return x;
    }
    return {...x, exercises: [...x.exercises, ...newExercisesForTuesday]};
  }),
}));

如果事情变得比这更复杂，您可能需要考虑使用useReducer 。

Answer 2

我在这里提供了一个示例代码，您必须将特定日期传递给函数，循环特定日期并更改它

[https://codesandbox.io/s/determined-frog-w6dr3l?file=/src/App.js][1]

Answer 3

你应该尝试做这样的事情：

 // Get a hook function const { useState } = React; const Example = ({ title }) => { const [formFields, setFormFields] = React.useState({ name: '', price: '', duration: '', description: '', daysPerWeek: '', allExercises: [{ day: 'Monday', exercises: [], }, ], }); function addDay() { const newExercises = { name: 'pushup', sets: '12', reps: '1', link: '', }; const StateCopy = {...formFields } const exercises = StateCopy.allExercises.map(item => { if (item.day === "Monday") { item.exercises.push(newExercises) } return item }); StateCopy.allExercises = exercises; setFormFields({...StateCopy }) } console.log(formFields) return ( < div > < button onClick = { addDay } > Click me < /button> < / div > ); }; // Render it ReactDOM.createRoot( document.getElementById("root") ).render( < Example title = "Example using Hooks:" / > );

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>

Answer 4

您可以使用扩展运算符语法来创建深度嵌套的 object 属性的副本，然后更新特定的属性，但这可能会随着代码的增长而变得难看。

或者，您可以使用Immer Library更新深度嵌套的属性。

Answer 5

我有类似的情况。 我以不同的方式构建数据。 由于已知天数并且您可以为每个天数设置一些 id，因此您可以：

{
    name: '',
    price: '',
    duration: '',
    description: '',
    daysPerWeek: '',
    allExercises: {
      'monday': {
          day: 'Monday',
          exercises: [
            {
              name: '',
              sets: '',
              reps: '',
              link: '',
            },
          ],
       }
    },
  }

然后，当你想添加一天

const addDay = (dayId: string, day: string) => {
    setFormFields({
        ...formFields,
        allExercises: {
            ...formFields.allExercises,
            [dayId]: {
                day,
                exercises: [],
            }
        }
    })
}

添加练习时：

const addExercise = (dayId: string, exercise: Exercise) => {
    setFormFields({
        ...formFields,
        allExercises: {
            ...formFields.allExercises,
            [dayId]: {
                ...formFields.allExercises[dayId],
                exercises: [
                    ...formFields.allExercises[dayId].exercises,
                    exercise
                ],
            }
        }
    })
}

我还建议检查 lodash 的_.merge() ，因为所有这些解构都很麻烦。

    setFormFields(_.merge(formFields, {
        allExercises: {
            [dayId]: {
                exercises: [
                    exercise
                ],
            }
        }
    }))

如果你想渲染它们，你可以只取值（或条目）

_.values(formFields.allExercises).map(exercise => <div key={exercise.day}>{...}</div>)

_.entries(formFields.allExercises).map(([dayId, exercise]) => <div key={dayId}>{...}</div>)

我还建议react-hook-form 。 检查一下，你可以用它做更多的事情。

Answer 6

下面的演示给出了一个基本的起点来解决添加特定日期的练习和管理 state。

根据您的用例，这会很快变得复杂，并且您可以想象变得非常冗长。 您可能最终想要查看 redux 和 reducer，但希望下面的模式能够提供一些关于如何开始考虑管理嵌套 state 和潜在策略的见解。

我也鼓励您查看底部的链接以获得一些好的阅读和示例。

演示/示例

https://codesandbox.io/s/keen-newton-84hqs2

import { useState } from "react";

const initialState = {
  allExercises: [
    {
      day: "Monday",
      exercises: [
        {
          name: "",
          sets: "",
          reps: "",
          link: ""
        }
      ]
    }
  ]
};

export default function App() {
  const [state, setState] = useState(initialState);

  function addExercise(e) {
    e.preventDefault();
    var data = new FormData(e.target);
    const formFields = Object.fromEntries(data.entries());
    const newExercise = {
      name: formFields.name,
      sets: formFields.sets,
      reps: formFields.reps,
      link: formFields.link
    };

    const createNewDay = !state.allExercises.find(
      (item) => item.day === formFields.day
    );

    if (createNewDay) {
      setState((prev) => {
        return {
          ...prev,
          allExercises: [
            ...prev.allExercises,
            ...[{ day: formFields.day, exercises: [newExercise] }]
          ]
        };
      });
      // else add new exercise to existing day
    } else {
      setState((prev) => {
        return {
          ...prev,
          allExercises: prev.allExercises.map((item) =>
            item.day === formFields.day
              ? {
                  ...item,
                  exercises: [...item.exercises, ...[newExercise]]
                }
              : item
          )
        };
      });
    }
  }

  console.log("current exercises state: ", state.allExercises);

  return (
    <div className="App">
      <form onSubmit={(e) => addExercise(e)}>
        <select name="day" id="day">
          <option value="Monday">Monday</option>
          <option value="Tuesday">Tuesday</option>
          <option value="Wednesday">Wednesday</option>
          <option value="Thursday">Thursday</option>
          <option value="Friday">Friday</option>
          <option value="Saturday">Saturday</option>
          <option value="Sunday">Sunday</option>
        </select>
        <input type="text" name="name" />
        <input type="text" name="sets" />
        <input type="text" name="reps" />
        <input type="text" name="link" />
        <button type="submit">Add Exercise</button>
      </form>
      <button type="button" onClick={() => setState(initialState)}>
        Reset State
      </button>
      {state.allExercises.map((item) => (
        <div>
          <div>
            <b>{item.day}</b>
          </div>
          {item.exercises.map((exercise, i) => (
            <div>
              <div>exercise {i + 1}</div>
              {Object.entries(exercise).map(([k, v]) => (
                <div>
                  {k}: {v}
                </div>
              ))}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

有用的资源/相关阅读

https://daveceddia.com/react-redux-immutability-guide/#redux-update-an-object

Answer 7

如果你想更新到指定的日期，如果已经选择，

function addDay(day, e) {
    e.preventDefault();
    const newEx = formFields.allExercises.map((ele) => {
      if (ele.day === day) {
        //you can add exercises here either from a state variable holding exercises for that day/ passing exercier to the button handler itself
        const newEle = { ...ele, exercises: [] };
        return newEle;
      } else {
        return ele;
      }
    });
    setFormFields((pre) => ({ ...pre, allExercises: newEx }));
  }

另一个版本

function addDay(day,exercises, e) {
    e.preventDefault();
    const newEx = formFields.allExercises.map((ele) => {
      if (ele.day === day) {
        //you can add exercises here either from a state variable holding exercises for that day/ passing exercier to the button handler itself
        const newEle = { ...ele, exercises: exercises };
        return newEle;
      } else {
        return ele;
      }
    });
    setFormFields((pre) => ({ ...pre, allExercises: newEx }));
  }

state 持有练习

function addDay(day, e) {
    e.preventDefault();
    const newEx = formFields.allExercises.map((ele) => {
      if (ele.day === day) {
        //you can add exercises here either from a state variable holding exercises for that day/ passing exercier to the button handler itself
        const newEle = { ...ele, exercises: stateExercises };//here
        return newEle;
      } else {
        return ele;
      }
    });
    setFormFields((pre) => ({ ...pre, allExercises: newEx }));
  }