為什么我的復選框在點擊后沒有更新？

Question

我正在嘗試使用 React Hooks 來更新項目列表。 當用戶單擊復選框時，應用程序應呈現已選擇為已購買的項目。

我可以記錄handPurchase()的事件並且狀態是正確的，但是，我無法使函數呈現最新狀態。

通過課堂，我可以做到：

const handlePurchase() {
  // ...
  this.setState(updatedGroceries);
}

this.state.groceries.map(//...render list

這是代碼：

export default function CheckboxList() {
    let initialGroceries = [
        {
            id: "one",
            text: "Apple",
            purchased: false
        },
        {
            id: "two",
            text: "Banana",
            purchased: false
        }
    ];
    const [groceries, setGroceries] = useState(initialGroceries);

    const handlePurchase = (id: string) => () => {
        groceries.forEach((item) => {
            if (item.id === id) {
                item.purchased = true;
            }
        });
        setGroceries(groceries);   
    }

    return (
      <List>
        {groceries.map((item) => {
          const labelId = `checkbox-list-label-${item.id}`;

          return (
            <ListItem key={item.id} role={undefined} dense button onClick={handlePurchase(item.id)}>
              <ListItemIcon>
                <Checkbox
                  checked={item.purchased}
                  inputProps={{ 'aria-labelledby': labelId }}
                />
              </ListItemIcon>
              <ListItemText id={labelId} primary={item.text} />
            </ListItem>
          );
        })}
      </List>
    );
}

另外，如果我這樣做：

const updatedGroceries = groceries.forEach((item) => {
            if (item.id === id) {
                item.purchased = true;
            }
        });
        setGroceries(updatedGroceries);   

我收到此錯誤：

“void”類型的參數不能分配給“SetStateAction<{id: string;”類型的參數。 文本：字符串； 購買：布爾值； }[]>'。 TS2345

Answer 1

問題是forEach沒有像您期望的那樣返回任何內容。 我猜您想使用setGroceries將所提供的id等於當前元素的已purchased屬性更新為true 。 所以你需要返回一個數組，例如使用Array.prototype.map() 。 從文檔：

map() 方法創建一個新數組，其中填充了對調用數組中的每個元素調用提供的函數的結果。

我想以下內容可以為您工作：

const updatedGroceries = groceries.map((item) => {
  if (item.id === id) {
    item.purchased = true;
  }

  return item;
});

setGroceries(updatedGroceries);   

在你的代碼被分配給updatedGroceries的forEach其結果undefined ，因為它不返回任何東西，發現在這里的文檔。

我希望這有幫助！