React Context API-表單輸入未定義

Question

我正在嘗試使用新的上下文API構建簡單的待辦事項應用程序，但是我很難調試我的輸入值未定義的原因。

我不太了解如何執行Provider提供的功能並將參數傳遞給它。

這是我的代碼：

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
const AppContext = React.createContext();

class AppProvider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todoList: [{ text: "first test element", isCompleted: false }]
    };
  }

  addTodo = (e) => {
    e.preventDefault();
    console.log(e.target.value);
    this.setState({
      todoList: [
        ...this.state.todoList,
        { text: e.target.value, isCompleted: false }
      ]
    });
  };

  render() {
    const { todoList, uniqueId } = this.state;
    return (
      <AppContext.Provider
        value={{ todoList, addTodo: this.addTodo }}
      >
        {this.props.children}
      </AppContext.Provider>
    );
  }
}

const Consumer = AppContext.Consumer;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
  }
  render() {
    return <AppProvider>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">TodoList</h1>
          </header>
          <Consumer>
            {state => <form onSubmit={state.addTodo}>
                <input type="text" />
                <button type="submit" onSubmit={state.addTodo}>
                  Add Todo
                </button>
              </form>}
          </Consumer>
          <Consumer>
            {val => (
              <ul>
                {val.todoList.map((item, index) => (
                  <li key={index}>{item.text}</li>
                ))}
              </ul>
            )}
          </Consumer>
        </div>
      </AppProvider>;
  }
}

export default App;

抱歉，如果我的問題很瑣碎，但我已經嘗試解決很多問題了，所以我找不到問題所在。

Answer 1

您只是在表單如何傳遞值方面遇到一些問題。 此外，你應該嘗試解耦事件和你的狀態中，如在工作實例這里 。