如何使用 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() {

  this.setDefaultValue()

}

setDefaultValue() {

  const { tipoBusqueda } = this.props;

  if (tipoBusqueda === '1')

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

  else if (tipoBusqueda === '2')

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

}

你不应该在你的render方法中这样做，因为你会导致一个无限循环。您的 setState 将再次调用您的渲染方法，然后您将再次调用 setState。

componentDidMount 只会在组件挂载后执行一次，不再执行。从 React 16.8 开始，您可以在功能组件中使用钩子来获得状态，因此我建议您将类组件更改为功能组件。你可以这样做：

import React, { useEffect, useState } from 'react'

const Component = ({ tipoBusqueda, showFiltersHeader }) => {

  const [filterFacturaNieType, setFilterFacturaNieType] = useState('')

  useEffect(() => {

    if (tipoBusqueda === '1')

      setFilterFacturaNieType('N');

    else if (tipoBusqueda === '2')

      setFilterFacturaNieType('F');

  }, [])

  if (showFiltersHeader) {

    return (

      <div className="search-container">

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

        <div className="caja-select">

          <select onChange={e => setFilterFacturaNieType(e.target.value)} name="filterFacturaNieType" value={filterFacturaNieType}>

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

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

          </select>

        </div>

      </div>

    )

  }

  return null

}

export default Component

您甚至可以将数字映射到字母，这样就可以避免不必要地调用 setState：

const numberToLetter = {

  1: 'N',

  2: 'F'

}

然后，在构造函数或 useState 上使用它。

// in a class component

constructor(props) {

  super(props)

  this.state = {

    filterFacturaNieType: numberToLetter[props.tipoBusqueda]

  }

}

// or 

state = {

  filterFacturaNieType: numberToLetter[this.props.tipoBusqueda]

}

// or in a functional component, using the useState:

const [filterFacturaNieType, setFilterFacturaNieType] = useState(numberToLetter[tipoBusqueda])