如何使用 setState？

Question

if (this.props.showFiltersHeader) {

            const { tipoBusqueda } = this.props;

            if (tipoBusqueda === '1')

                this.setState({ filterFacturaNieType: 'N'});

            else if (tipoBusqueda === '2')

                this.setState({ filterFacturaNieType: 'F'});            

            return <div>

                <div className="search-container">

                    <p>Buscar por NIE o Factura</p>

                    <div className="caja-select">

                        <select onChange={this.onChangeSelect} name="filterFacturaNieType" value={this.state.filterFacturaNieType}>

                        <option value='N'>NIE</option>

                        <option value='F'>Factura</option>

                        </select>

                    </div>

                    <span className="alert-span">{this.state.errors["filterFacturaNieType"]}</span>

                </div>

....

}

你为什么不使用 setState ？，总是选择第一个选项

Answer 1

如果您想根据 的值为您的状态定义一个默认值tipoBusqueda，您可以在 a useEffect、 componentDidMount 甚至在类构造函数中进行。由于您使用的是类组件，因此这应该可以解决问题：componentDidMount() {&nbsp; this.setDefaultValue()}setDefaultValue() {&nbsp; const { tipoBusqueda } = this.props;&nbsp; if (tipoBusqueda === '1')&nbsp; &nbsp; this.setState({ filterFacturaNieType: 'N' });&nbsp; else if (tipoBusqueda === '2')&nbsp; &nbsp; this.setState({ filterFacturaNieType: 'F' });&nbsp;&nbsp;}你不应该在你的render方法中这样做，因为你会导致一个无限循环。您的 setState 将再次调用您的渲染方法，然后您将再次调用 setState。componentDidMount 只会在组件挂载后执行一次，不再执行。从 React 16.8 开始，您可以在功能组件中使用钩子来获得状态，因此我建议您将类组件更改为功能组件。你可以这样做：import React, { useEffect, useState } from 'react'const Component = ({ tipoBusqueda, showFiltersHeader }) => {&nbsp; const [filterFacturaNieType, setFilterFacturaNieType] = useState('')&nbsp; useEffect(() => {&nbsp; &nbsp; if (tipoBusqueda === '1')&nbsp; &nbsp; &nbsp; setFilterFacturaNieType('N');&nbsp; &nbsp; else if (tipoBusqueda === '2')&nbsp; &nbsp; &nbsp; setFilterFacturaNieType('F');&nbsp; }, [])&nbsp; if (showFiltersHeader) {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="search-container">&nbsp; &nbsp; &nbsp; &nbsp; <p>Buscar por NIE o Factura</p>&nbsp; &nbsp; &nbsp; &nbsp; <div className="caja-select">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select onChange={e => setFilterFacturaNieType(e.target.value)} name="filterFacturaNieType" value={filterFacturaNieType}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='N'>NIE</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='F'>Factura</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )&nbsp; }&nbsp; return null}export default Component您甚至可以将数字映射到字母，这样就可以避免不必要地调用 setState：const numberToLetter = {&nbsp; 1: 'N',&nbsp; 2: 'F'}然后，在构造函数或 useState 上使用它。// in a class componentconstructor(props) {&nbsp; super(props)&nbsp; this.state = {&nbsp; &nbsp; filterFacturaNieType: numberToLetter[props.tipoBusqueda]&nbsp; }}// or&nbsp;state = {&nbsp; filterFacturaNieType: numberToLetter[this.props.tipoBusqueda]}// or in a functional component, using the useState:const [filterFacturaNieType, setFilterFacturaNieType] = useState(numberToLetter[tipoBusqueda])