组件确实更新，但 if 语句不起作用

Question

我在我的反应代码中发现了一个奇怪的行为。我对反应还很陌生，无法弄清楚。

在过去的几天里，我创建了一个不错的仪表板，并想添加一个包含 CRUD 事务的数据页面。当 searchForm 状态为 true 时，我想更改搜索按钮内的文本，但它仅在组件更新后起作用，而不是在第一次渲染时起作用。我已将 searchForm 状态设置为 false，并在 searchBtnClick 上将状态设置为 true。但按钮内的文本不会改变。

Answer 1

我对这段代码提出一些建议：这是一种个人偏好，使用箭头表示法来定义类方法，这样您就不必.bind(this)为每个方法都定义了。// this is the same asconstructor(props) {&nbsp; this.someFunc = this.someFunc.bind(this)}someFunc() {}// writing just thissomeFunc = () => {}您内部的代码if (this.state.error) {}几乎与整个组件相同，只是做了一些细微的更改。我建议您的 if 语句更有针对性/具体，只需更改所需的最小部分即可。（参见下面的大代码）在一些地方，您使用三元运算符来返回某些内容 OR a <Fragment />。同样，这可能只是个人喜好，但您可以使用它&&来简化代码。// this is the same as{this.state.searchForm ? (&nbsp; <MyComponent />) : (&nbsp; <Fragment />)}// is the same as writing{this.state.searchForm && <MyComponent />}// or{this.state.searchForm && (&nbsp; <MyComponent&nbsp; &nbsp; foo="something"&nbsp; &nbsp; bar="baz"&nbsp; &nbsp; onClick={this.onClick}&nbsp; />)}这是应用了上面的简化的完整代码示例。RE：您的实际问题是，为什么文本没有在搜索按钮内交换...您的点击处理程序看起来正确，应该正确更改状态...也许像我建议的那样使用 if 语句，更有针对性仅更改按钮内的实际文本而不是整个按钮会有所帮助。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 {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; year: 0,&nbsp; &nbsp; &nbsp; month: "",&nbsp; &nbsp; &nbsp; transactions: [],&nbsp; &nbsp; &nbsp; searchForm: false,&nbsp; &nbsp; &nbsp; addForm: false,&nbsp; &nbsp; &nbsp; editForm: false,&nbsp; &nbsp; &nbsp; error: false,&nbsp; &nbsp; &nbsp; errorMessage: "",&nbsp; &nbsp; };&nbsp; &nbsp; this.months = [&nbsp; &nbsp; &nbsp; "January",&nbsp; &nbsp; &nbsp; "February",&nbsp; &nbsp; &nbsp; "March",&nbsp; &nbsp; &nbsp; "April",&nbsp; &nbsp; &nbsp; "May",&nbsp; &nbsp; &nbsp; "June",&nbsp; &nbsp; &nbsp; "July",&nbsp; &nbsp; &nbsp; "August",&nbsp; &nbsp; &nbsp; "September",&nbsp; &nbsp; &nbsp; "October",&nbsp; &nbsp; &nbsp; "November",&nbsp; &nbsp; &nbsp; "December",&nbsp; &nbsp; ];&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; const currentDate = new Date();&nbsp; &nbsp; var currentYear = currentDate.getYear() + 1900;&nbsp; &nbsp; this.setState({ year: currentYear });&nbsp; &nbsp; var currentMonth = this.months[currentDate.getMonth()].toLowerCase();&nbsp; &nbsp; this.setState({ month: currentMonth });&nbsp; &nbsp; getTransaction({ year: currentYear, month: currentMonth }).then((res) => {&nbsp; &nbsp; &nbsp; if (res.error) {&nbsp; &nbsp; &nbsp; &nbsp; this.setError(true, res.error);&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; this.setError(false);&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ transactions: res });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; }&nbsp; navBtnClick = () => {&nbsp; &nbsp; this.props.updateNavBarState();&nbsp; };&nbsp; addBtnClick = (e) => {&nbsp; &nbsp; this.setState({ addForm: !this.state.addForm });&nbsp; };&nbsp; searchBtnClick = () => {&nbsp; &nbsp; this.setState({ searchForm: !this.state.searchForm });&nbsp; };&nbsp; editBtnClick = (e) => {&nbsp; &nbsp; this.setState({ editForm: !this.state.editForm });&nbsp; };&nbsp; deleteBtnClick = (e) => {};&nbsp; updateTable = (transactions) => {&nbsp; &nbsp; // If there isn't an error, close the form&nbsp; &nbsp; if (this.state.error === false) {&nbsp; &nbsp; &nbsp; this.setState({ transactions: transactions });&nbsp; &nbsp; &nbsp; this.setState({ addForm: false });&nbsp; &nbsp; &nbsp; this.setState({ searchForm: false });&nbsp; &nbsp; &nbsp; this.setState({ editForm: false });&nbsp; &nbsp; }&nbsp; };&nbsp; setError = (state, message = "") => {&nbsp; &nbsp; this.setState({ error: state });&nbsp; &nbsp; this.setState({ errorMessage: message });&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <Fragment>&nbsp; &nbsp; &nbsp; &nbsp; <SideBar sideBarState={this.props.sideBarState} />&nbsp; &nbsp; &nbsp; &nbsp; <div className="page">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="grid head">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span id="sidebarCollapseBtn">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i className="fas fa-align-left" onClick={this.navBtnClick}></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 className="capitalize">data</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="card" id="dataCard">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="actions" id="actions">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="flex">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="search btn"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="searchBtn"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={this.searchBtnClick}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.searchForm ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "close"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i className="fas fa-search mr-025"></i>search&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="add btn"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="addBtn"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={this.addBtnClick}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i className="fas fa-plus mr-025"></i>add&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.searchForm && (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SearchForm&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; year={this.state.year}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; month={this.state.month}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; updateTable={this.updateTable}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setError={this.setError}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="output">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.error && <h2>{this.state.errorMessage}</h2>}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.transactions.length > 1 && (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TransactionTable transactions={this.state.transactions} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </Fragment>&nbsp; &nbsp; );&nbsp; }}