Tengo algún estado y su setState también. pero quiero convertir al componente de clase al componente funcional pero no entiendo en setState cómo hacerlo
estado:
constructor(posts) { super(posts); this.state = { data: posts, searchResultArray: [], cursor: {}, currentResultIndex: 0, }; this.onToggle = this.onToggle.bind(this); }Establecer estado :
por favor, mire this.setState mi punto es cómo convertir componentes funcionales en esos setState? No entiendo cómo hacer varios estados en esta función.setState . ¿Puedo hacer esto en componentes funcionales?
onTextChange = (e) => { const { data } = this.state; let term = e.target.value; let tempObj = {}; let results = []; let newData = {}; if (term.length > 0) { results = getSearchResult(term, data); console.log(results); } if (results.length > 0) { tempObj = setSearchResult(data, results, 0); newData = tempObj.data; } else { newData = data; } this.setState({ searchResultArray: results, data: newData, searchTerm: term, }); }; onBtnClick = (e) => { const { data, searchResultArray, currentResultIndex } = this.state; let index = 0; let tempObj = {}; if (e.target.id === "prev") { index = currentResultIndex - 1; tempObj = setSearchResult(data, searchResultArray, index); this.setState({ data: tempObj.data, currentResultIndex: index, cursor: tempObj.cursor, }); } if (e.target.id === "next") { index = currentResultIndex + 1; tempObj = setSearchResult(data, searchResultArray, index); this.setState({ data: tempObj.data, currentResultIndex: index, cursor: tempObj.cursor, }); } };Para cambiar esto a un componente funcional, debe utilizar el enlace useState. Básicamente, useState hook se usa para almacenar una variable de estado y actualizarla más tarde, ya no necesita usar el estado de la clase. Hay 2 formas de convertir su estado en useState, ya sea usando un useState grande, que almacenará una variable similar a su estado actual. O podría cortar su estado en pedazos pequeños (que es mucho más limpio y la forma en que debería hacerlo en una reacción funcional)
Así es como lo harías:
const [data, setData] = useState(posts); const [searchResultsArray, setSearchResultsArray] = useState(); const [cursor, setCursor] = useState(); const [currentResultIndex, setCurrentResultIndex] = useState();Luego, en su onClick:
onBtnClick = (e) => { const { data, searchResultArray, currentResultIndex } = this.state; let index = 0; let tempObj = {}; if (e.target.id === "prev") { index = currentResultIndex - 1; setCurrentResultIndex(index) tempObj = setSearchResult(data, searchResultArray, index); setData(tempObj.data) setCursor(tempObj.cursor) } if (e.target.id === "next") { index = currentResultIndex + 1; setCurrentResultIndex(index) tempObj = setSearchResult(data, searchResultArray, index); setData(tempObj.data) setCursor(tempObj.cursor) } };