当值来自 props 时，为什么我不需要设置 useState？

Question

我正在呈现一个列表，该列表根据过滤器更新进行更新，如下所示。

const Expenses = (props) => {
  const [filteredYear, setFilteredYear] = useState('2020');

  const defaultExpenseData = props.items.filter(
    (b) => b.date.getFullYear() === 2020
  );

  const [filteredExpenseData, setFilteredExpensesData] =
    useState(defaultExpenseData);

  const filterChangeHandler = (selectedYear) => {
    setFilteredYear(selectedYear);
    const filteredExpense = props.items.filter(
      (b) => b.date.getFullYear() == selectedYear
    );
    setFilteredExpensesData(filteredExpense);
    console.log(filteredExpense);
  };

  return (
    <div>
      <Card className="expenses">
        <ExpensesFilter
          selected={filteredYear}
          onChangeFilter={filterChangeHandler}
        />
        {filteredExpenseData.length == 0 && <p>No data</p>}
        {filteredExpenseData.length > 0 &&
          filteredExpenseData.map((expense) => (
            <ExpenseItem
              key={expense.id}
              title={expense.title}
              amount={expense.amount}
              date={expense.date}
            />
          ))}
      </Card>
    </div>
  );
};

据我了解，当值由 useState 管理时，React 会根据某些值的变化进行渲染。

但是，上面的方法仍然有效，尤其是当我没有像下面那样为 filteredExpensesData 设置 useState 时。

const Expenses = (props) => {
  const [filteredYear, setFilteredYear] = useState('2020');

  // const defaultExpenseData = props.items.filter(
  //   (b) => b.date.getFullYear() === 2020
  // );

  // const [filteredExpenseData, setFilteredExpensesData] =
  //   useState(defaultExpenseData);

  const filteredExpense = props.items.filter(
    (b) => b.date.getFullYear().toString() === filteredYear
  );

  const filterChangeHandler = (selectedYear) => {
    setFilteredYear(selectedYear);
    // const filteredExpense = props.items.filter(
    //   (b) => b.date.getFullYear() == selectedYear
    // );
    // setFilteredExpensesData(filteredExpense);
    // console.log(filteredExpense);
  };

  return (
    <div>
      <Card className="expenses">
        <ExpensesFilter
          selected={filteredYear}
          onChangeFilter={filterChangeHandler}
        />
        {filteredExpense.length == 0 && <p>No data</p>}
        {filteredExpense.length > 0 &&
          filteredExpense.map((expense) => (
            <ExpenseItem
              key={expense.id}
              title={expense.title}
              amount={expense.amount}
              date={expense.date}
            />
          ))}
      </Card>
    </div>
  );
};

在后面的代码中，我注释掉了所有与过滤数据状态管理相关的行。

这是为什么？我能想到的唯一原因是 “也许一些数据来自道具，不需要 useState”

任何人都可以帮助我理解这种行为吗？

Answer 1

items是一个状态。

在您的应用程序的某个地方，items 状态被传递到 props。每当 items 发生变化时，在应用中使用 items 状态的任何地方，React 都会 re-render 如果值已更改。

您不需要 re-create 反映 items 的状态。

当值来自 props 时，为什么我不需要设置 useState？

Why do I not need to set useState when a value is from props?

reactjs

use-state