props在reactjs中没有定义

3gtaxfhh  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(302)

您好,我试图根据道具的值为我的应用程序设置状态,我依赖道具的值为我的状态设置状态,但当我传递函数设置状态时,我收到的道具未定义,不知道为什么,我遵循此文档作为参考。您可以阅读下面的部分,其中说状态更新可能是异步的,这是我的代码(来自form.js文件的代码片段)

this.props.setTodos(function (_, props) {
      console.log("this is props:" + props);
      return [
        ...props.todos,
        { text: props.inputText, completed: false, id: Math.random() *            1000 },
      ];
    });

我传递道具的app.js文件的代码

import "./App.css";
import Form from "./components/Form";
import TodoList from "./components/TodoList";
import React, { useState } from "react";
function App() {
  const [inputText, setText] = useState("");
  const [todos, setTodos] = useState([]);
  return (
    <div className="App">
      <header>
        <h1>My Todolist </h1>
      </header>
      <Form
        todos={todos}
        setTodos={setTodos}
        setText={setText}
        inputText={inputText}
      />
      <TodoList />
    </div>
  );
}

export default App;

form.js文件的完整代码

import React from "react";

class Form extends React.Component {
  constructor(props) {
    super(props);
  }
  handler = (e) => {
    // console.log(e.target.value);
    this.props.setText(e.target.value);
  };
  submitTodoHandler = (e) => {
    e.preventDefault();

    this.props.setTodos(function (_, props) {
      console.log("this is props:" + props);
      return [
        ...props.todos,
        { text: props.inputText, completed: false, id: Math.random() * 1000 },
      ];
    });
  };
  render() {
    return (
      <div>
        <form>
          <input onChange={this.handler} type="text" className="todo-input" />
          <button
            onClick={this.submitTodoHandler}
            className="todo-button"
            type="submit"
          >
            <i className="fas fa-plus-square"></i>
          </button>
          <div className="select">
            <select name="todos" className="filter-todo">
              <option value="all">All</option>
              <option value="completed">Completed</option>
              <option value="uncompleted">Uncompleted</option>
            </select>
          </div>
        </form>
      </div>
    );
  }
}
export default Form;

我不知道为什么我的道具没有定义?谢谢

70gysomp

70gysomp1#

你需要做的是改变 submitTodoHandler 在你的生活中起作用 <Form> 组成部分:

submitTodoHandler = (e) => {
    e.preventDefault();
    console.log(this.props.inputText) // outputs what you typed in the input
    this.props.setTodos(this.props.inputText);
  };

您可以在functional component中定义setstate,并将其作为prop传递给类组件。函数组件中的setstate钩子的行为与您正在引用的类组件中的setstate稍有不同。
在functional components中,setstate(在您的例子中是settodos)只需使用 setState(newVariableValue) 并接受前一状态作为参数。当newvariablevalue与prop(inputtext)一起从 <App> 组件到 <Form> 组件,您可以使用直接访问它 this.props.inputText .
使用状态挂钩

相关问题