为什么在加载页面时选择标签值不显示默认值

Question

我有一个带有三个选项的select标签。 我使用 state 设置了一个默认值。 但是当页面加载时，默认值没有显示。 它显示第一个选项。 我的控制台没有显示任何错误或提示，以便我可以解决问题。

这是我的代码。

import React, { useState } from 'react';
import Card from '../card/Card';
import ExpenseFilter from '../expense-filter/ExpenseFilter';
import ExpenseItem from '../expense-item/ExpenseItem';
import './Expenses.css';

const Expenses = props => {
  const [value, setValue] = useState('2022');

  const { items } = props;

  const selectHandler = event => {
    setValue(event.target.value);
  };

  return (
    <Card className="expenses">
      <ExpenseFilter value={value} selectHandler={selectHandler} />
      {items.map(expense => (
        <ExpenseItem
          key={expense.id}
          date={expense.date}
          title={expense.title}
          amount={expense.amount}
        />
      ))}
    </Card>
  );
};

export default Expenses;

import React from 'react';

const ExpenseFilter = props => {
  return (
    <div className="my-3">
      <select
        value={props.value}
        onChange={props.selectHandler}
        className="form-select"
        aria-label="Default select example">
        <option value="1">2020</option>
        <option value="2">2021</option>
        <option value="3">2022</option>
      </select>
    </div>
  );
};

export default ExpenseFilter;

我该如何解决这个问题？ 我想在页面加载时获取默认值。

Answer 1

更新您<option>的value属性。

<select
   value={props.value}
   onChange={props.selectHandler}
   className="form-select"
   aria-label="Default select example">
   <option value="2020">2020</option>
   <option value="2021">2021</option>
   <option value="2022">2022</option>
</select>