狀態更改不會觸發重新渲染

我有一個ExpenseList.js如下所示的組件呼叫。但我的問題是當我嘗試編輯專案并單擊保存時，isEditable在“保存”按鈕事件處理程式中設定不會觸發重新渲染。

import { useState } from "react";
import { useExpenses, useExpenseDispatch } from "./BudgetContext.js";

export default function ExpenseList() {
  const expenses = useExpenses();
  return (
    <ul>
      {expenses.map((expense) => (
        <li key={expense.id}>
          <Expense expense={expense} />
        </li>
      ))}
    </ul>
  );
}

function Expense({ expense }) {
  const [isEditing, setIsEditing] = useState(false);
  const dispatch = useExpenseDispatch();
  let content;

  if (isEditing) {
    content = (
      <>
        <input
          value={expense.description}
          onChange={(e) => {
            dispatch({
              type: "changed",
              expense: {
                ...expense,
                description: e.target.value
              }
            });
          }}
        />
        <input
          value={expense.amount}
          onChange={(e) => {
            dispatch({
              type: "changed",
              expense: {
                ...expense,
                amount: e.target.value
              }
            });
          }}
        />
        <button onClick={() => setIsEditing(false)}>Save</button>
      </>
    );
  } else
    content = (
      <>
        <span>{expense.description}</span> : <span>{expense.amount}</span>
        <button onClick={() => setIsEditing(true)}>Edit</button>
      </>
    );

  return (
    <label>
      {content}
      <button
        onClick={() => {
          dispatch({
            type: "deleted",
            id: expense.id
          });
        }}
      >
        Delete
      </button>
    </label>
  );
}

我已經涉獵了幾個小時，我認為額外的一雙眼睛可以指出出了什么問題？

沙盒：https ://codesandbox.io/s/clever-keller-l5z42e?file=/ExpenseList.js:0-1614

uj5u.com熱心網友回復：

檔案參考

內容模型：短語內容，但沒有后代可標記元素，除非它是元素的標記控制元件，并且沒有后代標簽元素。

如上所述，label有 2 個不同的可標記元素，除非它是元素的標記控制元件。當您處于編輯模式時，您有 3 個不同的可標記元素（和） input-description，這會導致事件傳播出現問題。input-amountbutton-save

但是當您不處于編輯模式時，它只有 1 個可標記元素，即edit按鈕，因此它可以作業。

為了解決您的問題，您可以label將根替換為類似的內容div，然后為input內容中的每個 s 顯式使用標簽。

function Expense({ expense }) {
  const [isEditing, setIsEditing] = useState(false);  
  let content;

  if (isEditing) {
    content = (
      <>
        <label>
          Description: 
          <input
            value={expense.description}
            onChange={...}
          />
        </label>
        <label>
          Amount: 
          <input
            value={expense.amount}
            onChange={...}
          />
        </label>
        <button onClick={() => setIsEditing(false)}>Save</button>
      </>
    );
  } else
    content = (
      <>
        <button onClick={() => setIsEditing(true)}>Edit</button>
      </>
    );

  return (
    <div>
      {content}
      <button>Delete</button>
    </div>
  );
}

標籤：javascripthtml反应dom

上一篇：僅當在上一個彈出視窗上按下某個按鈕并洗掉文本框時，如何使用GoogleApps腳本創建彈出視窗？

下一篇：Javascript不會替換影像