要求 Hook 更新状态变化

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>

主要问题是在保存数据的时候，有一个大bug。 useGetSetDB() 用于从 API 中获取整个集合列表。保存后，我使用 setCardlist 更新组件状态。正是在这里，我注意到 setlist 没有改变。新条目不存在，这导致 findDuplicates 失败。我的数据库检查重复项，因此 console.logs 将显示插入失败。我如何强制 useGetSetDB 更新每个状态 change.This 是 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 以适应状态变化

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;

要求 Hook 更新状态变化

Requiring a Hook to update on state change

javascript

reactjs

react-hooks