React 无法从函数中设置状态

Question

我正在尝试将基于类的组件转换为功能组件。 我相信我已经具备了基于功能的组件的基础知识，但由于某种原因，当单击按钮时，useState 并没有翻转布尔值。

工作代码：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import BootstrapTable from "react-bootstrap-table-next";
import "bootstrap/dist/css/bootstrap.min.css";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import "./styles.css";
import { Button } from "react-bootstrap";

const products = [
  { id: 1, name: "Item 1", price: 100 },
  { id: 2, name: "Item 2", price: 102 }
];

class App extends Component {
  constructor() {
    super();
    this.state = {
      // For displaying data
      columns: [
        {
          dataField: "id",
          text: "id",
          sort: true
        },
        {
          dataField: "name",
          text: "Name",
          sort: true
        },
        {
          dataField: "price",
          text: "Product Price"
        },
        {
          dataField: "follow",
          text: "Follow",
          formatter: this.linkFollow,
          sort: true
        }
      ],
      isFollow: true
    };

    this.onFollowChanged.bind(this);
  }

  onFollowChanged() {
    this.setState({ isFollow: !this.state.isFollow });
    console.log(this.state.isFollow);
  }

  linkFollow = (cell, row, rowIndex, formatExtraData) => {
    return (
      <Button
        onClick={() => {
          this.onFollowChanged(row);
        }}
      >
        Follow
      </Button>
    );
  };

  render() {
    return (
      <div style={{ padding: "20px" }}>
        <h1 className="h2">Products</h1>
        <BootstrapTable
          keyField="id"
          data={products}
          columns={this.state.columns}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

沙盒中的工作演示

非工作代码：

import React, { useState } from "react";
import BootstrapTable from "react-bootstrap-table-next";
import "bootstrap/dist/css/bootstrap.min.css";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import { Button } from "react-bootstrap";

export default function App() {
  function onFollowChanged() {
    setIsPresent(!isPresent);
    console.log(isPresent);
  }

  let buttonFollow = (cell, row, rowIndex, formatExtraData) => {
    return <Button onClick={() => onFollowChanged(row)}>Present</Button>;
  };

  const [isPresent, setIsPresent] = useState(true);

  const students = [
    {
      id: 100,
      fName: "John",
      lName: "Doe",
      grade: "first"
    },
    {
      id: 200,
      fName: "Jane",
      lName: "Doe",
      grade: "second"
    },
    {
      id: 300,
      fName: "Peter",
      lName: "Paker",
      grade: "third"
    },
    {
      id: 400,
      fName: "Clark",
      lName: "Kent",
      grade: "fourth"
    },
    {
      id: 500,
      fName: "LeBron",
      lName: "James",
      grade: "fifth"
    }
  ];

  const columns = [
    {
      dataField: "id",
      text: "id",
      sort: true
    },
    {
      dataField: "fName",
      text: "First Name",
      sort: true
    },
    {
      dataField: "lName",
      text: "Last Name"
    },
    {
      dataField: "grade",
      text: "Grade",
      sort: true
    },
    {
      dataField: "present",
      text: "Present",
      formatter: buttonFollow
    }
  ];

  return (
    <div>
      <BootstrapTable keyField="id" data={students} columns={columns} />
    </div>
  );
}

使用我的代码，当我单击“Present”按钮时，控制台日志会不断打印isPresent的初始值。 我期待它在真/假之间切换。

沙盒中的非工作演示。

Answer 1

您快到了，我从沙箱中获取了您的代码：

  const [isPresent, setIsPresent] = useState(true);

  function toggleValue() {
    setIsPresent(!isPresent);
    console.log(isPresent);
  }

  return (
    <div>
      <BootstrapTable keyField="id" data={students} columns={columns} />
      <button onClick={toggleValue}>Test</button>
      {isPresent ? "true" : "false"} // conditional render string value
    </div>
  );

资源推荐： React beta 文档