javascript - react : how to lift props up to parent component?

Question

我是 React 新手，正在学习教程。

我正处于需要将 props 从子组件提升到父组件的阶段。目前，我在父组件上有一个简单的函数，它只是 console.logs 从子组件中检索到的值。

但是，它不起作用。我刚刚在 console.log 中得到 undefined 。我不确定我做错了什么，因为它看起来与教程中的示例相同。

谁能帮帮我吗？

这是我的父组件:

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;

还有我的子组件:

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;

我的目标是在父组件中console.log选定的年份。任何帮助表示赞赏。谢谢!

Answer 1

setSelectedYear 返回void。 useState 和 setState 的签名是:

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

type Dispatch<A> = (value: A) => void;

尝试

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;