Soy nuevo en React y estoy siguiendo un tutorial.
Estoy en una etapa en la que necesito elevar los accesorios de los componentes secundarios a los principales. Por el momento, tengo una función simple en el componente principal que solo consola. registra el valor recuperado del elemento secundario.
Sin embargo, no funciona. Acabo de quedar undefined en mi console.log. No estoy seguro de lo que hice mal, ya que parece lo mismo que el ejemplo en el tutorial.
¿Puede alguien ayudarme?
Aquí está mi componente principal:
import React from 'react'; import ExpensesFilter from '../ExpensesFilter/ExpensesFilter'; import ExpenseItem from "./ExpenseItem"; import Card from "../Ui/Card"; import './Expenses.css'; const Expense = (props) => { const yearChangeHandler = (chosenYear) => { console.log(chosenYear); // Returns Undefined } return ( <div> <ExpensesFilter onYearChange={yearChangeHandler}/> <Card className="expenses"> <ExpenseItem title={props.items[0].title} amount={props.items[0].amount} date={props.items[0].date} /> </div> ); } export default Expense;Y mi componente hijo:
import React, { useState } from 'react'; import './ExpensesFilter.css'; const ExpensesFilter = (props) => { const [selectedYear, setSelectedYear] = useState(''); const yearChangeHandler = (event) => { const chosenYear = setSelectedYear(event.target.value); props.onYearChange(chosenYear); }; return ( <div className='expenses-filter'> <div className='expenses-filter__control'> <label>Filter by year</label> <select onChange={yearChangeHandler}> <option value='2022'>2022</option> <option value='2021'>2021</option> <option value='2020'>2020</option> <option value='2019'>2019</option> </select> </div> </div> ); }; export default ExpensesFilter;Mi objetivo es consolar. registrar el año seleccionado en el componente principal. Cualquier ayuda es apreciada. ¡Gracias!
setSelectedYear devuelve void . Las firmas de useState y setState son:
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>]; type Dispatch<A> = (value: A) => void;Probar
import React, { useState } from 'react'; import './ExpensesFilter.css'; const ExpensesFilter = (props) => { const [selectedYear, setSelectedYear] = useState(''); const yearChangeHandler = (event) => { const chosenYear = event.target.value; setSelectedYear(chosenYear); props.onYearChange(chosenYear); }; return ( <div className='expenses-filter'> <div className='expenses-filter__control'> <label>Filter by year</label> <select onChange={yearChangeHandler}> <option value='2022'>2022</option> <option value='2021'>2021</option> <option value='2020'>2020</option> <option value='2019'>2019</option> </select> </div> </div> ); }; export default ExpensesFilter;Es posible que el valor que está pasando 'setSelectedYear' directamente no se establezca debido al comportamiento asíncrono de useState .
intente pasar el target.value en su lugar.
const [selectedYear, setSelectedYear] = useState(''); const yearChangeHandler = (event) => { const chosenYear = event.target.value; setSelectedYear(chosenYear); props.onYearChange(chosenYear); };