为什么选择“加载页面”时选择的标签值未显示默认值

Question

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

这是我的代码。

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

更新您＆lt; option＆gt;'s 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>