React：如何将道具提升到父组件？答案

【问题标题】：React: how to lift props up to parent component?React：如何将道具提升到父组件？
【发布时间】：2022-01-07 06:35:32
【问题描述】：

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

我正处于需要将道具从子组件提升到父组件的阶段。目前我在父组件上有一个简单的函数，它只是 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;

我的目标是在父组件中控制台记录所选年份。任何帮助表示赞赏。谢谢！

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案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;

【讨论】：

【解决方案2】：

由于 useState 的异步行为，您直接传递 'setSelectedYear' 的值可能无法设置。

尝试传递 target.value。

const [selectedYear, setSelectedYear] = useState('');
const yearChangeHandler = (event) => {
  const chosenYear = event.target.value;
  setSelectedYear(chosenYear);
  props.onYearChange(chosenYear); 
};

【讨论】：