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}