在不替换现有值的情况下更新上下文 (React)

Question

Description of the problem

我正在尝试根据我的上下文显示不同的任务。每次提交表单时，我都希望在另一个任务下出现一个新任务，而不是在提交表单后旧任务被新任务替换。我确定这是一个平庸的问题，但这是我的第一个反应项目。此外，我正在使用 样式化组件 ，因此为了便于阅读，我将 css 留在代码块之外。

Context

import { createContext, useState } from "react";

export const TaskContext = createContext();

export const TaskProvider = ({ children }) => {
  const [tasks, setTasks] = useState([]);

  return (
    <TaskContext.Provider
      value={{
        tasks,
        setTasks,
      }}
    >
      {children}
    </TaskContext.Provider>
  );
};

Form

import React from "react";
import styled from "styled-components";
import { useState, useContext } from "react";
import { TaskContext, TaskProvider } from "../TaskContext"; 

    export default function Form() {
  const [text, setText] = useState([]);
  const [time, setTime] = useState([]);
  const [reminder, setReminder] = useState(false);

  const task = useContext(TaskContext);

  const submitHandler = (e) => {
    e.preventDefault();

    task.setTasks([{ text, time, reminder }]);

    setText("");
    setTime("");
    setReminder(false);
  };

  return (
    <StyledForm onSubmit={submitHandler}>
      <FormControl>
        <Label>Task</Label>
        <Input
          type="text"
          placeholder="Add Task"
          value={text}
          required
          onChange={(e) => setText(e.target.value)}
        ></Input>
      </FormControl>

      <FormControl>
        <Label>Day & Time</Label>
        <Input
          type="text"
          placeholder="Add Day ß Time"
          required
          value={time}
          onChange={(e) => setTime(e.target.value)}
        ></Input>
      </FormControl>

      <FormControlCheck>
        <FormControlCheckLabel>Set Reminder</FormControlCheckLabel>
        <FormControlCheckInput
          type="checkbox"
          value={reminder}
          onChange={(e) => setReminder(e.currentTarget.checked)}
        ></FormControlCheckInput>
      </FormControlCheck>

      <Submit type="submit" value="Save Task"></Submit>
    </StyledForm>
  );
}

Tasks

    import React from "react";
import { useContext } from "react";
import { TaskContext } from "../TaskContext";
import Task from "./Task";

export default function Tasks() {
  const context = useContext(TaskContext);

  return (
    <>
      {context.tasks.map((task) => (
        <Task text={task.text} time={task.time} reminder={task.reminder}></Task>
      ))}
    </>
  );
}

Task

    import React from "react";
import styled from "styled-components";

export default function Task(props) {
  return (
    <StyledTask>
      <HeaderThree>{props.text}</HeaderThree>
      <Parag>{props.time}</Parag>
    </StyledTask>
  );
}

感谢您花时间阅读我的 post！

Answer 1

您只需将一个新的任务对象放入任务数组中，这就是为什么所有旧任务都会消失的原因。解决方法是先分散旧任务，然后再添加新任务。

在submitHandler 替换 task.setTasks([{ text, time, reminder }]); task.setTasks([...task.tasks, { text, time, reminder }]);

在不替换现有值的情况下更新上下文 (React)

Update context without replacing existing values (React)

reactjs

react-context

react-hooks