Function 作为连续调用的道具发送 - React.js

Question

我正在制作一个新闻应用程序，我希望它有不同的类别，而不是使用 react-router-dom 进行导航我想做的是创建一个 state object 并在其中创建一个名为类别的键并将当前类别设置为它的值和我已将该密钥作为道具发送到新闻组件，我在其中获取新闻并将该类别嵌入到获取 URL

我做了一个 function 来设置类别及其在 app.js 我已经将它作为道具发送到导航栏组件，我面临的问题是我不能 select 一个类别，因为出于某种原因最后一个 onClick category 被连续调用，我知道这一点，因为我在 setCategory function 中记录了该类别，谁能告诉我为什么会这样

app.js 中的代码：

import './App.css';
import React, { Component } from 'react'
import Navbar from './components/Navbar';
import News from './components/News';

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      darkMode: "light",
      country: "us",
      category: "general",
      key: "general"
    }
  }

  setCategory = (cat)=> {
    this.setState({
      category: cat
    })
    console.log(this.state.category)
  }

  setCountry = (cntry)=> {
    this.setState({
      category: cntry
    })
  }

  setDarkMode = () => {
    if (this.state.darkMode === "light") {
      this.setState({ darkMode: "dark" })
      document.body.style.backgroundColor = "black"
    } else {
      this.setState({ darkMode: "light" })
      document.body.style.backgroundColor = "white"
    }
  }

  render() {
    return (
      <div>
        <Navbar setCategory={this.setCategory} setCountry={this.setCountry} setDarkMode={this.setDarkMode} darkMode={this.state.darkMode} />
        <News key={this.state.category} category={this.state.category} country={this.state.country} pageSize={18} darkMode={this.state.darkMode} />
      </div>
    )
  }
}

导航栏组件中的代码：

import React, { Component } from 'react'



export default class Navbar extends Component {
    constructor(props) {
        super(props)
        this.setCategory = this.props.setCategory
    }
    render() {
        return (
            <div>
                <nav className={`navbar navbar-expand-lg navbar-${this.props.darkMode} bg-${this.props.darkMode}`}>
                    <a className="navbar-brand" href="/">NewsMonkey</a>
                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>

                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav mr-auto">
                            <li className="nav-item active">
                                <a className="nav-link" href="/">Home <span className="sr-only">(current)</span></a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/about">About</a>
                            </li>
                            <li className="nav-item dropdown">
                                <a className="nav-link dropdown-toggle" href="/" role="button" data-toggle="dropdown" aria-expanded="false">
                                    Categories
                                </a>
                                <div className="dropdown-menu">
                                    <p className="dropdown-item cursor-pointer" onClick={this.setCategory("business")}>Business</p>
                                    <p className="dropdown-item cursor-pointer" onClick={this.setCategory("science")}>Science</p>
                                    <p className="dropdown-item cursor-pointer" onClick={this.setCategory("technology")}>Technology</p>
                                    <p className="dropdown-item cursor-pointer" onClick={this.setCategory("entertainment")}>Entertainment</p>
                                    <p className="dropdown-item cursor-pointer" onClick={this.setCategory("health")}>Health</p>
                                    <p className="dropdown-item cursor-pointer" onClick={this.setCategory("sports")}>Sports</p>
                                    <div className="dropdown-divider"></div>
                                    <p className="dropdown-item cursor-pointer" onClick={this.setCategory("general")}>General</p>
                                </div>
                            </li>
                        </ul>
                        {/* <form className="form-inline my-2 my-lg-0">
                            <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
                            <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                        </form> */}
                        <div className={`custom-control custom-switch text-${this.props.darkMode === "light" ? "dark" : "light"}`}>
                            <input type="checkbox" className="custom-control-input" onClick={this.props.setDarkMode} id="customSwitch1" />
                            <label className={`custom-control-label`} htmlFor="customSwitch1">Dark mode</label>
                        </div>
                    </div>
                </nav>
            </div>
        )
    }
}

Answer 1

这并不像你认为的那样：

onClick={this.setCategory("business")}

这会立即调用setCategory function 并将该 function 的结果用作onClick处理程序。 不要将调用 function 的结果传递给onClick ，传递 function 本身：

onClick={() => this.setCategory("business")}