设置状态不设置状态

Question

我有一个非常简单的具有单一状态的组件，我在创建组件时初始化状态，并在提交表单时尝试更改它。

由于某种原因，它不能工作。

import React, { Component } from "react";

export default class AddTodo extends Component {
  constructor() {
    super();
    this.state = {
      submited: false
    };
  }

  handleSubmit = event => {
    this.setState = {
      submited: true
    };
    alert("Submited state: " + this.state.submited);
    event.preventDefault();
  };

  render() {
    return (
      <div className="container mt-3">
        <form onSubmit={this.handleSubmit}>
          <div className="input-group mb-3">
            <input
              type="text"
              className="form-control"
              placeholder="New Todo Description Here"
            />
            <div className="input-group-append">
              <button className="btn btn-primary" type="submit">
                Add Todo
              </button>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

Answer 1

this.setState是一个函数，所以调用它就像使用括号()一样。

this.setState({
    submited: true
});

Answer 2

import React, { Component } from "react";

export default class AddTodo extends Component {
  constructor() {
    super();
    this.state = {
      submited: false
    };
  }

  handleSubmit = event => {
    this.setState({
      submited: true
    },()=>{
          alert("Submited state: " + this.state.submited);
          event.preventDefault();
    });

  };

  render() {
    return (
      <div className="container mt-3">
        <form onSubmit={this.handleSubmit}>
          <div className="input-group mb-3">
            <input
              type="text"
              className="form-control"
              placeholder="New Todo Description Here"
            />
            <div className="input-group-append">
              <button className="btn btn-primary" type="submit">
                Add Todo
              </button>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

Answer 3

正如您所看到的，here setState是一个函数，但是您正在为它赋值。

问题出在这里：

this.setState = {
      submited: true
};

它应该是：

this.setState({submitted: true}); // Mind the typo also

为了快速说明，React团队在版本16.8中发布了react钩子，作为对具有一些缺点的类组件的替代。我会试一试，文档是here的。

使用钩子，您的代码将如下所示：

import React, { useState } from 'react';

function AddTodo() {
  // Declare a new state variable, which we'll call "count"
  const [isSubmitted, setSubmission] = useState(false);

  function handleSubmit(event) {
     setSubmission(true);
     event.preventDefault();
  }

  return (
    <div className="container mt-3">
    <form onSubmit={handleSubmit}>
      <div className="input-group mb-3">
        <input
          type="text"
          className="form-control"
          placeholder="New Todo Description Here"
        />
        <div className="input-group-append">
          <button className="btn btn-primary" type="submit">
            Add Todo
          </button>
        </div>
      </div>
    </form>
  );
}