使用 useState hook - 编程之家

如何解决使用 useState hook

我正在尝试构建一个界面，您可以在其中创建一个活动，然后将其添加到另一个包含所有已构建活动对象数组的对象中。从顶层 App.js 我声明并使用这些函数

  const defaultActivity = {
    id: null,title: "",group: "",distance: 0,duration: 0,reps: 0,sets: 0,type: 1,weight: 0
  };
  const session = {
    date: selectedDate,start: null,end: null,activities: [{}]
  };
  const [activity,setActivity] = useState({});
  const [workout,setWorkout] = useState(session);

  function addActivityClick() {
    setWorkout({ ...workout,activities: [{ ...activity }] });
  }

并使用此渲染组件

  return (
    <Grid container component="main">
      <Grid item sm={6}>
        <WorkoutBoard activity={activity} />
      </Grid>
      <Grid item sm={6} component={Paper} elevation={6} square>
        <ExerciseSelect
          activity={activity}
          defaultActivity={defaultActivity}
          setActivity={setActivity}
          workout={workout}
          setWorkout={setWorkout}
        />
        <Grid
          container
          spacing={2}
          alignItems="center"
          direction="row"
          style={{ margin: "auto" }}
        >
          <Grid item sm={6} align="center">
            <Button
              variant="contained"
              color="primary"
              align="center"
              onClick={addActivityClick}
            >
              Add Activity
            </Button>
          </Grid>
          <Grid item sm={6} align="center">
            <Button
              variant="contained"
              color="primary"
              onClick={viewWorkoutClick}
            >
              View Workout
            </Button>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );

我认为使用扩展运算符会起作用，但它只会替换那个活动对象，它不会像我希望的那样附加一个新对象。

我创建了一个沙箱来说明：https://codesandbox.io/s/affectionate-glitter-93wum

创建并添加一个活动，然后当您“查看锻炼”时，它将控制台记录该对象。

 Array(1)}
date: Fri Feb 05 2021 16:43:52 GMT-0800 (Pacific Standard Time)
start: null
end: null
activities: Array(1)
0: Object
name: "weights"
duration: 30
sets: 3
weights: 125
reps: 2

感谢您提供有关如何将其他活动推送到该数组而不是替换它的任何帮助。