如何觀察react組件函式內useEffect中全域Set變數的變化？

我有一個頁面，其中有串列。用戶可以從該串列中檢查專案。

每當用戶檢查某些東西時，它就會被添加到一個全域宣告的Set（每個專案的唯一 ID 被添加到這個集合中）。該集合中的 ID 需要由單獨的組件（我們稱之為PROCESS_COMPONENT）訪問，該組件處理 ID 存在于集合中的特定串列。

我的串列代碼大致如下：

import React from "react";
import { CheckBox, PROCESS_COMPONENT } from "./Process.jsx";

const ListItem = ({lItem}) => {
    return (
            <>
               //name,image,info,etc.
               <CheckBox lId={lItem.id}/>
            </>
)
};

function Listings() {
 // some declarations blah blah..
 return (
       <>
          <PROCESS_COMPONENT /> // Its a sticky window that shows up on top of the Listings.
          //..some divs and headings
          dataArray.map(item => { return <ListItem lItem={item} /> }) // Generates the list also containing the checkboxes
       </>
)
}

并且Checkbox和PROCESS_COMPONENT功能存在于單獨的檔案（Process.jsx）中。

它看起來大致如下：

import React, { useEffect, useState } from "react";

let ProcessSet = new Set(); // The globally declared set.

const CheckBox = ({lID}) => {
   const [isTicked, setTicked] = useState(false);
   const onTick = () => setTicked(!isTicked);
   useEffect( () => {
     if(isTicked) {
          ProcessSet.add(lID);
     }
     else { 
          ProcessSet.delete(lID); 
     }
     console.log(ProcessSet); // Checking for changes in set.
   }, [isTicked]);
   return (
      <div onClick={onTick}>
       //some content
      </div>
   )
}

const PROCESS_COMPONENT = () => {
   const [len, setLen] = useState(ProcessSet.size);
   useEffect( () => {
      setLen(ProcessSet.size);
   }, [ProcessSet]); // This change is never being picked up.
   return (
        <div>
        <h6> {len} items checked </h6>
        </div>
   )
}

export { CheckBox, PROCESS_COMPONENT };

Set 本身確實從Checkbox. 但是PROCESS_COMPONENT似乎沒有在 Set 中獲取更改并len顯示 0（集合的初始大小）。

I am pretty new to react. However any help is appreciated.

Edit:

Based on @jdkramhoft 's answer I made the set into a state variable in Listings function.

const ListItem = ({lItem,set,setPSet}) => {
   //...
        <CheckBox lID={lItem.id} pset={set} setPSet={setPSet} />
   )
}

function Listings() {
  const [processSet, setPSet] = useState(new Set());
  //....
      <PROCESS_COMPONENT set={processSet} />
      dataArray.map(item => { 
          return <ListItem lItem={item} set={processSet} setPSet={setPSet} /> 
      })
}

And corresponding changes in Process.jsx

const CheckBox = ({lID,pset,setPSet}) => {
  //...
  if (isTicked) {
     setPSet(pset.add(lID)); 
  }
  else {
     setPSet(pset.delete(lID));
  }
  //...
}

const PROCESS_COMPONENT = ({set}) => {
   //...
   setLen(set.size);
   //...
}

Now whenever I click the check box I get an error:

TypeError: pset.add is not a function. (In 'pset.add(lID)', 'pset.add' is undefined)

Similar error occurs for the delete function as well.

uj5u.com熱心網友回復：

首先，const [mySet, setMySet] = useState(new Set());如果您想對檢測到的更改做出反應以正確重新渲染，則該集合應該是一個反應狀態。如果您需要該集合可用于多個組件，您可以使用 props 或使用背景關系將其傳遞給它們。

其次，React 檢查依賴項[ProcessSet]是否已更改為類似===. 即使集合中的專案不同，也不會檢測到任何變化，因為物件是相同的并且沒有重新渲染。

更新：

的setState部分[state, setState] = useState([]);不是為了改變前一個狀態——只是為了提供下一個狀態。因此，要更新您的集合，您可以執行以下操作：

  const [set, setSet] = useState(new Set())
  const itemToAdd = ' ', itemToRemove = ' ';
  setSet(prev => new Set([...prev, itemToAdd]));
  setSet(prev => new Set([...prev].filter(item => item !== itemToRemove)));

您可能會注意到，這使得從集合中添加和洗掉與串列一樣慢。因此，除非您需要進行大量檢查，否則set.has()我建議使用串列：

  const [items, setItems] = useState([])
  const itemToAdd = ' ', itemToRemove = ' ';
  setItems(prev => [...prev, itemToAdd]);
  setItems(prev => prev.filter(item => item !== itemToRemove));

標籤：javascript reactjs dom

上一篇：為每一行計算二維陣列中的總和

下一篇：無法將串列項添加到HTML檔案