Props 在 Reactjs 中被证明是未定义的

Question

您好，我正在尝试根据 Props 的值为我的应用设置 setState 我依赖于 prop 的值作为我的状态，但是当我将函数传递给 setState 时，我收到的 props 是未定义的，不知道为什么，我跟着this document做参考。您可以阅读 状态更新可能是异步的 部分下面是我的代码（来自文件 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;

我不知道为什么我的道具是未定义的？谢谢

Answer 1

您需要做的是更改 <Form> 组件中的 submitTodoHandler 功能：

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

您在功能组件中定义 setState 并将其作为 prop 传递给 class 组件。功能组件中的 setState 挂钩与您引用的 class 组件中的 setState 行为略有不同。

在功能组件中，setState（或您的情况下的 setTodos）只需使用 setState(newVariableValue) 即可更改变量的状态，并接受先前状态作为参数。由于 newVariableValue 通过 prop (inputText) 从 <App> 组件传递到 <Form> 组件，您可以直接使用 this.props.inputText.

访问它

Using the State Hook

Props 在 Reactjs 中被证明是未定义的

Props turns out to be undefined in Reactjs

javascript

ecmascript-6

reactjs

react-state