Javascript React上下文API-表单输入未定义

我试图用新的上下文API构建简单的todo应用程序，但我很难调试为什么输入值未定义

我不太明白如何执行提供者提供的函数并向其传递参数

这是我的密码：

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;

import React，{Component}来自“React”；
从“/logo.svg”导入徽标；
导入“/App.css”；
const AppContext=React.createContext（）；
类AppProvider扩展组件{
建造师（道具）{
超级（道具）；
此.state={
todoList:[{text:“第一个测试元素”，isCompleted:false}]
};
}
addTodo=（e）=>{
e、 预防默认值（）；
console.log（如target.value）；
这是我的国家({
托多利斯特：[
…这个州，托多利斯特，
{text:e.target.value，isCompleted:false}
]
});
};
render（）{
const{todoList，uniqueId}=this.state；
返回(
{this.props.children}
);
}
}
const Consumer=AppContext.Consumer；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={value:：}；
}
render（）{
返回
任务列表
{state=>
添加待办事项
}
{val=>(

{val.todoList.map（（项，索引）=>(
{item.text}
))}

)}
;
}
}
导出默认应用程序；

---

如果我的问题很琐碎，很抱歉，但我一直在尝试解决这个问题，但我找不到问题所在。

您刚才在表单如何发送值方面遇到了一些问题。此外，您应该尝试将事件和状态解耦，如工作示例所示。

答案不是这样，但您可以在当前使用的语法上使用此语法：this.setState（{todoList:this.state.todoList.concat（{text:e.target.value，isCompleted:false}）@领主，羊驼谢谢，我会用它的，非常感谢。如果你不介意我问的话，我还有两个问题：-为什么在onClick事件中使用箭头函数，这比我的方法好吗？-我在任何地方都找不到一个原因，为什么有时人们将arrow函数包装在react in圆括号（）中，有时包装在block{}中，这背后的原因是什么？1。）实际上最好在类上定义一个函数并使用它，因为按照我的方式，每次渲染时都会创建一个新函数。我这么做只是为了简洁。2.）第二种方法很好，通常是首选方法。