Props 原来在 Reactjs 中是未定义的

Question

嗨，我试图根据 Props 的值为我的应用程序 setState 我依赖于我的 state 的 props 值，但是当我将函数传递给 setState 时，我收到的 props 是未定义的，不知道为什么，我关注this document 以供参考。您可以阅读状态更新可能是异步的部分 下面是我的代码（来自 File Form.js 的代码 sn-p）

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

我传递 props 的 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 并将其作为道具传递给类组件。功能组件中的 setState 钩子的行为与您所引用的类组件中的 setState 略有不同。

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

Using the State Hook