React js doenst 更新后重新渲染 state

Question

我创建了一个父组件，它收集了一堆子组件：费用 - 父母，费用项目 - 孩子。

我通过在 Expenses 内部进行硬编码定义了 ExpenseItem 的第一个值，我将动态值输入到 ExpenseItem 组件元素，然后使用“props”参数将数据从 ExpenseItem 获取到 Expenses。

function Expenses() {

    const Data = [{
    title: `מסרק`,
    date: Date(),
    amount: 2.95,
  },
]

  return (
    <div>
      <ExpenseItem 
        title={Data[0].title}
        date={Data[0].date}
        amount={Data[0].amount}
      />
      
    </div>
  );
}

现在，我想通过 ExpenseItem 组件中的“编辑”按钮更新值。 当我通过 useState 更新值并在控制台记录它们时，我看到了更新后的值，但是，组件没有重新呈现，所以我在屏幕上看到了 prev 值。 尽管如果我尝试对值进行硬编码，它会重新呈现并更改屏幕上的值。

function ExpenseItem(props) {
  const [title, setTitle] = useState(props.title);
  const [date, setDate] = useState(props.date);
  const [amount, setAmount] = useState(props.amount);

  const clickHandle = () => {
    console.log(title);
    setTitle("חתול")

    console.log(Date());
    setDate(date)

    console.log(amount);
    setAmount("222")
  }


  return (
    <div className="ExpenseItem">
      <div className="ExpenseItem_EditFunctions">
        <p className="ExpenseItemDate">{props.date}</p>
        <div className="ExpenseItem_EditFunctions_Icons">
          <span className="material-icons delete">delete</span>
          <span className="material-icons edit" onClick={clickHandle}>
            edit
          </span>
        </div>
        <div className="ExpenseItem_MainContent">
          <h3 className="ExpenseItemTitle">{props.title}</h3>
          <p className="ExpenseItemAmount">₪{props.amount}</p>
        </div>
      </div>
    </div>
  );
}

Answer 1

这是因为您正在使用道具来显示您需要显示 state 值而不是它们的值。您需要将所有道具值替换为相应的 state 值才能使此代码正常工作。 只需将{props.date}替换为{date} {props.title}为{title}并将{props.amount}为{amount}