React Context API 返回未定义

Question

我对 React 很陌生，我正在尝试制作一个 ToDoList。我有一个带有提交按钮的模态，按下该按钮时应该添加一个 ToDoItem。但是因为我不想通过这个来支撑我的方式，所以我想使用 Context API。 Context API 让我很困惑，也许我只是个白痴，但我很难理解为什么我必须制作一个钩子并将其作为提供程序中的值传递。我认为在 ToDoContext 中我已经将默认值定义为空数组，所以我又做了一次。

在第 62 行的控制台中，这是我的初始渲染，它说它是未定义的，在按下添加待办事项后，我得到了相同的消息。

App.jsx

import React, { useState } from "react";
import { render } from "react-dom";
import { ThemeProvider } from "emotion-theming";
import { defaultTheme } from "./theme";
import { Global, css } from "@emotion/core";
import Header from "./components/Header";
import ToDoList from "./components/ToDoList";
import AddBtn from "./components/AddBtn";
import ToDoContext from "./ToDoContext";

    const App = () => {
      const [toDoItems] = useState([]);

      return (
        <>
          {/*Global styling*/}
          <Global
            styles={css`
              * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                list-style: none;
                text-decoration: none;
              }
            `}
          />

          {/*App render start from here*/}
          <ThemeProvider theme={defaultTheme}>
            <ToDoContext.Provider value={toDoItems}>
              <Header />
              <main>
                <ToDoList />
                <AddBtn />
              </main>
            </ToDoContext.Provider>
          </ThemeProvider>
        </>
      );
    };

    render(<App />, document.getElementById("root"));

ToDoContext.jsx

import { createContext } from "react";

const ToDoContext = createContext([[], () => {}]);

export default ToDoContext;

AddBtn.jsx

import React, { useState, useContext } from "react";
import { css } from "emotion";
import Modal from "../Modal";
import ToDoContext from "../ToDoContext";

const BtnStyle = css`
  position: fixed;
  bottom: 0;
  right: 0;
  cursor: pointer;
  display: block;
  font-size: 7rem;
`;

const ModalDiv = css`
  position: fixed;
  left: 50%;
  background-color: #e6e6e6;
  width: 60%;
  padding: 20px 20px 100px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  height: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  top: 50%;
`;

const textareaStyle = css`
  resize: none;
  width: 100%;
  height: 200px;
  font-size: 1.25rem;
  padding: 5px 10px;
`;

const timeStyle = css`
  font-size: 3rem;
  display: block;
`;

const modalSubmit = css`
  width: 100%;
  font-size: 3rem;
  cursor: pointer;
  margin-top: auto;
`;

const Label = css`
  font-size: 2rem;
  text-align: center;
  display: inline-block;
  margin-bottom: 50px;
`;

const AddBtn = () => {
  const [showModal, setShowModal] = useState(true);
  const [time, setTime] = useState("01:00");
  const [toDoItems, setToDoItems] = useContext(ToDoContext);
  console.log(toDoItems);
  return (
    <>
      <div className={BtnStyle} onClick={() => setShowModal(!showModal)}>
        <ion-icon name="add-circle-outline"></ion-icon>
      </div>

      {showModal ? (
        <Modal>
          <div className={ModalDiv}>
            <div>
              <label className={Label} htmlFor="time">
                Time
                <input
                  className={timeStyle}
                  type="time"
                  name="time"
                  value={time}
                  onChange={(e) => setTime(e.target.value)}
                />
              </label>
            </div>
            <label className={Label} htmlFor="desc">
              Description
              <textarea
                className={textareaStyle}
                name="desc"
                placeholder={`Notify yourself this message in ${time}`}
              ></textarea>
            </label>
            <button
              className={modalSubmit}
              onClick={() => {
                setToDoItems(
                  toDoItems.push({
                    time,
                  })
                );
              }}
            >
              Add ToDo
            </button>
          </div>
        </Modal>
      ) : null}
    </>
  );
};

export default AddBtn;

Answer 1

您的代码中有几个问题需要修复：

• useState 返回 value 和 setter。使用这行代码const [toDoItems] = useState([]);，您只是将一个空数组传递给您的上下文。

这样做：

const toDoItems = useState([]);

• 在您的 ToDoContext.js 中，只需传递一个空数组作为参数（初始值）

const ToDoContext = createContext([]);

code is here 的工作副本。 （查看控制台日志）

另外，我注意到您正在 AddBtn.js 中的 setTodoItems 中推送待办事项。

不要这样做：

onClick={() => {
                setToDoItems(
                  toDoItems.push({
                    time
                  })
                );
              }}

这样做：

onClick={() => {
                setToDoItems(
                  toDoItems.concat([
                    {
                      time
                    }
                  ])
                );
              }}