需要一個鈎子來更新 state 的變化

Question

所以這是我在 React JS 中的一個組件

const EnterSetData = ({ user_card_set }) => {
  const [cardlist, setCardlist] = useState({ data: [] });

  let setlist= useGetSetDB();

  //Save and reset form
  const sendSets = () => {   
    const dupes = findDuplicates(setlist, cardlist); 
    if (dupes.length > 0) {
     saveSets(setlist)
     setCardlist({ data: [] });
    } else {
      handleDupes(dupes);
    }
  };

useEffect(() => {
    setCardlist(card_set);
  }, [card_set]);

return (
    <>
  {cardlist.data.map((card, key) => (
            <a> .......</a>))}

        <button 
         type="button"
          onClick={sendSets}
        >
          Save Cards
        </button>
      </div>

主要問題是在保存數據時，存在一個重大錯誤。 useGetSetDB()用於從 API 獲取整個集合列表。保存后，我使用setCardlist更新組件 state。正是在這里，我注意到setlist沒有改變。 新條目不存在，這會導致findDuplicates失敗。 我的數據庫檢查重復項，因此 console.logs 將顯示插入失敗。 我如何強制useGetSetDB在每次 state 更改時更新。這是useGetSetDB

const useGetSetDB = () => {
    const[state,setState] = useState([]);

    const fetchData = async () => {
        const data = await fetch("/sets");
        const res = await data.json();        
        return res;
      };
      
      useEffect(()=>{
        fetchData().then(response => {setState(response)})
      },[])

  return state
}

export default useGetSetDB;

Answer 1

您可以像下面這樣將cardlist傳遞給useGetSetDB

const [cardlist, setCardlist] = useState({ data: [] });
let setlist = useGetSetDB(cardlist); //whenever cardlist gets updated, we trigger side-effect again

您還需要修改useGetSetDB以與 state 更改對齊

const useGetSetDB = (cardlist) => {
    const[state,setState] = useState([]);

    const fetchData = async () => {
        const data = await fetch("/sets");
        const res = await data.json();        
        return res;
      };
      
      useEffect(()=>{
        fetchData().then(response => {setState(response)})
      }, [cardlist]) //add `cardlist` to dependency list

  return state
}

export default useGetSetDB;