首頁猿問如何使用 setState？

如何使用 setState？

JavaScript

qq_花開花謝_0 2022-10-13 19:25:22

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 ？，總是選擇第一個選項

查看完整描述

1 回答

開心每一天1111

TA貢獻1836條經驗獲得超13個贊

如果您想根據的值為您的狀態定義一個默認值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 (

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

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

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

</select>

</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])

反對回復 2022-10-13

1 回答
0 關注
115 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用 setState？

如何使用 setState？

1 回答

添加回答

如何使用 setState？

如何使用 setState？