Javascript 组件不会更新，但如果语句为'；行不通

我在react代码中发现了一个奇怪的行为。我还没有反应过来，还没弄明白

在过去的几天里，我创建了一个漂亮的仪表板，并希望添加一个包含CRUD事务的数据页。 当searchForm状态为true时，我想更改search按钮内的文本，但它只在组件更新后才起作用，而不是在第一次渲染时起作用。我已经用false启动了searchForm状态，在searchBtnc上单击该状态设置为true。但是按钮内的文本不会改变

import React, { Component, Fragment } from 'react';

import SideBar from '../../components/navBar/SideBar';
import SearchForm from '../../components/forms/SearchForm';
import TransactionTable from '../../components/tables/TransactionTable';

import './data.css';

import { getTransaction } from '../../actions/Transactions';

export default class Data extends Component {
    constructor(props) {
        super(props);

        this.state = {
            year: 0,
            month: '',
            transactions: [],
            searchForm: false,
            addForm: false,
            editForm: false,
            error: false,
            errorMessage: '',
        };

        this.navBtnClick = this.navBtnClick.bind(this);
        this.addBtnClick = this.addBtnClick.bind(this);
        this.searchBtnClick = this.searchBtnClick.bind(this);
        this.editBtnClick = this.editBtnClick.bind(this);
        this.deleteBtnClick = this.deleteBtnClick.bind(this);
        this.updateTable = this.updateTable.bind(this);
        this.setError = this.setError.bind(this);

        this.months = [
            'January',
            'February',
            'March',
            'April',
            'May',
            'June',
            'July',
            'August',
            'September',
            'October',
            'November',
            'December',
        ];
    }

    componentDidMount() {
        const currentDate = new Date();
        var currentYear = currentDate.getYear() + 1900;
        this.setState({ year: currentYear });
        var currentMonth = this.months[currentDate.getMonth()].toLowerCase();
        this.setState({ month: currentMonth });

        getTransaction({ year: currentYear, month: currentMonth }).then((res) => {
            if (res.error) {
                this.setError(true, res.error);
            } else {
                this.setError(false);
                this.setState({ transactions: res });
            }
        });
    }

    navBtnClick() {
        this.props.updateNavBarState();
    }

    addBtnClick(e) {
        this.setState({ addForm: !this.state.addForm });
    }

    searchBtnClick() {
        this.setState({ searchForm: !this.state.searchForm });
    }

    editBtnClick(e) {
        this.setState({ editForm: !this.state.editForm });
    }

    deleteBtnClick(e) {}

    updateTable(transactions) {
        // If there isn't an error, close the form
        if (this.state.error === false) {
            this.setState({ transactions: transactions });
            this.setState({ addForm: false });
            this.setState({ searchForm: false });
            this.setState({ editForm: false });
        }
    }

    setError(state, message = '') {
        this.setState({ error: state });
        this.setState({ errorMessage: message });
    }

    render() {
            return (
                <Fragment>
                    <SideBar sideBarState={this.props.sideBarState} />
                    <div className="page">
                        <div className="grid head">
                            <span id="sidebarCollapseBtn">
                                <i className="fas fa-align-left" onClick={this.navBtnClick}></i>
                            </span>
                            <h1 className="capitalize">data</h1>
                        </div>
                        <div className="content">
                            <div className="card" id="dataCard">
                                <div className="actions" id="actions">
                                    <div className="flex">
                                        // This if statement
                                        {this.state.searchForm === true ? (
                                            <button
                                                className="search btn"
                                                id="searchBtn"
                                                onClick={this.searchBtnClick}
                                            >
                                                close
                                            </button>
                                        ) : (
                                            <button
                                                className="search btn"
                                                id="searchBtn"
                                                onClick={this.searchBtnClick}
                                            >
                                                <i className="fas fa-search mr-025"></i>search
                                            </button>
                                        )}
                                        <button
                                            className="add btn"
                                            id="addBtn"
                                            onClick={this.addBtnClick}
                                        >
                                            <i className="fas fa-plus mr-025"></i>add
                                        </button>
                                    </div>
                                    {this.state.searchForm ? (
                                        <SearchForm
                                            year={this.state.year}
                                            month={this.state.month}
                                            updateTable={this.updateTable}
                                            setError={this.setError}
                                        />
                                    ) : (
                                        <Fragment />
                                    )}
                                </div>
                                <div className="output">
                                    {this.state.transactions.length > 1 ? (
                                        <TransactionTable transactions={this.state.transactions} />
                                    ) : (
                                        <Fragment />
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>
                </Fragment>
            );
    }
}

import React，{Component，Fragment}来自'React'；
从“../../components/navBar/SideBar”导入侧栏；
从“../../components/forms/SearchForm”导入SearchForm；
从“../../components/tables/TransactionTable”导入TransactionTable；
导入“/data.css”；
从“../../actions/Transactions”导入{getTransaction}；
导出默认类数据扩展组件{
建造师（道具）{
超级（道具）；
此.state={
年份：0，
月份：''，
交易：[]，
searchForm:false，
地址：false，
编辑：错，
错误：false，
错误消息：“”，
};
this.navBtnClick=this.navBtnClick.bind（this）；
this.addBtnClick=this.addBtnClick.bind（this）；
this.searchBtnClick=this.searchBtnClick.bind（this）；
this.editBtnClick=this.editBtnClick.bind（this）；
this.deleteBtnClick=this.deleteBtnClick.bind（this）；
this.updateTable=this.updateTable.bind（this）；
this.setError=this.setError.bind（this）；
这个月=[
“一月”，
“二月”，
“三月”，
"四月",，
“五月”，
“六月”，
“七月”，
“八月”，
"九月",，
“十月”，
"十一月",，
"十二月",，
];
}
componentDidMount（）{
const currentDate=新日期（）；
var currentYear=currentDate.getYear（）+1900；
this.setState（{year:currentYear}）；
var currentMonth=this.months[currentDate.getMonth（）].toLowerCase（）；
this.setState（{month:currentMonth}）；
getTransaction（{year:currentYear，month:currentMonth}）。然后（（res）=>{
if（res.error）{
此.setError（true，res.error）；
}否则{
此.setError（false）；
this.setState（{transactions:res}）；
}
});
}
navbtclick（）{
this.props.updateNavBarState（）；
}
addBtnClick（e）{
this.setState（{addForm:！this.state.addForm}）；
}
searchBtnClick（）{
this.setState（{searchForm:！this.state.searchForm}）；
}
编辑按钮（e）{
this.setState（{editForm:！this.state.editForm}）；
}
deleteBtnClick（e）{}
可更新（事务）{
//如果没有错误，请关闭表单
if（this.state.error==false）{
this.setState（{transactions:transactions}）；
this.setState（{addForm:false}）；
this.setState（{searchForm:false}）；
this.setState（{editForm:false}）；
}
}
setError（状态，消息=“”）{
this.setState（{error:state}）；
this.setState（{errorMessage:message}）；
}
render（）{
返回(
数据
//这个if语句
{this.state.searchForm===true(
关闭
) : (
搜索
)}
添加
{this.state.searchForm(
) : (
)}
{this.state.transactions.length>1(
) : (
)}
);
}
}

提前感谢,，

---

Marc

关于此代码，我有几点建议：

有点个人偏好，使用箭头符号定义类方法，这样就不必为每个类都绑定（this）

if（this.state.error）{}

中的代码与整个组件几乎相同，只是做了一些小改动。我建议你的if声明更具针对性/针对性，只需更改所需的最小部分。（参见下面的大代码）

在一些地方，您使用三元运算符返回某物或

。同样，这可能只是个人偏好，但您可以使用

&&

简化一些代码

//这与
{this.state.searchForm(
) : (
)}
//和写作一样
{
// this is the same as
constructor(props) {
  this.someFunc = this.someFunc.bind(this)
}
someFunc() {}

// writing just this
someFunc = () => {}

// this is the same as
{this.state.searchForm ? (
  <MyComponent />
) : (
  <Fragment />
)}

// is the same as writing
{this.state.searchForm && <MyComponent />}

// or
{this.state.searchForm && (
  <MyComponent
    foo="something"
    bar="baz"
    onClick={this.onClick}
  />
)}

import React, { Component, Fragment } from "react";

import SideBar from "../../components/navBar/SideBar";
import SearchForm from "../../components/forms/SearchForm";
import TransactionTable from "../../components/tables/TransactionTable";

import "./data.css";

import { getTransaction } from "../../actions/Transactions";

export default class Data extends Component {
  constructor(props) {
    super(props);

    this.state = {
      year: 0,
      month: "",
      transactions: [],
      searchForm: false,
      addForm: false,
      editForm: false,
      error: false,
      errorMessage: "",
    };

    this.months = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ];
  }

  componentDidMount() {
    const currentDate = new Date();
    var currentYear = currentDate.getYear() + 1900;
    this.setState({ year: currentYear });
    var currentMonth = this.months[currentDate.getMonth()].toLowerCase();
    this.setState({ month: currentMonth });

    getTransaction({ year: currentYear, month: currentMonth }).then((res) => {
      if (res.error) {
        this.setError(true, res.error);
      } else {
        this.setError(false);
        this.setState({ transactions: res });
      }
    });
  }

  navBtnClick = () => {
    this.props.updateNavBarState();
  };

  addBtnClick = (e) => {
    this.setState({ addForm: !this.state.addForm });
  };

  searchBtnClick = () => {
    this.setState({ searchForm: !this.state.searchForm });
  };

  editBtnClick = (e) => {
    this.setState({ editForm: !this.state.editForm });
  };

  deleteBtnClick = (e) => {};

  updateTable = (transactions) => {
    // If there isn't an error, close the form
    if (this.state.error === false) {
      this.setState({ transactions: transactions });
      this.setState({ addForm: false });
      this.setState({ searchForm: false });
      this.setState({ editForm: false });
    }
  };

  setError = (state, message = "") => {
    this.setState({ error: state });
    this.setState({ errorMessage: message });
  };

  render() {
    return (
      <Fragment>
        <SideBar sideBarState={this.props.sideBarState} />
        <div className="page">
          <div className="grid head">
            <span id="sidebarCollapseBtn">
              <i className="fas fa-align-left" onClick={this.navBtnClick}></i>
            </span>
            <h1 className="capitalize">data</h1>
          </div>
          <div className="content">
            <div className="card" id="dataCard">
              <div className="actions" id="actions">
                <div className="flex">
                  <button
                    className="search btn"
                    id="searchBtn"
                    onClick={this.searchBtnClick}
                  >
                    {this.state.searchForm ? (
                      "close"
                    ) : (
                      <Fragment>
                        <i className="fas fa-search mr-025"></i>search
                      </Fragment>
                    )}
                  </button>
                  <button
                    className="add btn"
                    id="addBtn"
                    onClick={this.addBtnClick}
                  >
                    <i className="fas fa-plus mr-025"></i>add
                  </button>
                </div>
                {this.state.searchForm && (
                  <SearchForm
                    year={this.state.year}
                    month={this.state.month}
                    updateTable={this.updateTable}
                    setError={this.setError}
                  />
                )}
              </div>
              <div className="output">
                {this.state.error && <h2>{this.state.errorMessage}</h2>}
                {this.state.transactions.length > 1 && (
                  <TransactionTable transactions={this.state.transactions} />
                )}
              </div>
            </div>
          </div>
        </div>
      </Fragment>
    );
  }
}