这是我遇到过的最糟糕的bug之一。我们正在处理的代码包括从数据库中获取数据，并创建两个单独的状态来保存传入的数据，一个包含原始数据，另一个用于改变该数据。我创建了这两个单独的数据集，以便相互比较，并让用户知道他们能够发布更改。
下面，您将在控制台中看到两个状态都以null开始，然后从后端接收基本数据，一旦我添加了一个产品，两个状态都随该产品更新……但只有一个状态应该更新

这是初始化数据的地方（index.js）：

const [initialData, setInitialData] = useState(null);
  const [data, setData] = useState(null);
  const [initial, setInitial] = useState(false);

  const [newChanges, setNewChanges] = useState(false);

  useEffect(() => {
    if(isEqual(data, initialData)) {
      setNewChanges(false);
    } else {
      setNewChanges(true);
    }
  }, [data, setData, initialData, setInitialData])

  useEffect(() => {
    console.log("Editable Data:");
    console.log(data);
    console.log(' ');
    console.log('Initial Data');
    console.log(initialData);
  }, [data, setData, initialData, setInitialData])

  useEffect(() => {
    if(initial === true) return;
    if(session === undefined) return;
    if(status === 'unauthenticated') {
      router.push('/');
      return;
    }
    if(status === 'loading') return;
    if(data !== null) return;
    if(initialData !== null) return;

    async function dashboardData() {
      setInitial(true);
      
      const result = await axios.post(`${window.location.origin}/api/admin/dashboard`, {
        id: session.user.token.id,
        username: session.user.token.username
      }).catch((error) => {
        alert(error.toString())
      })
      if(result !== undefined) {
        if(result.status === 200) {
          const resData = result.data;
          setData(resData);
          setInitialData(resData);
          console.log("Data retrieved from database");
        } else {
          alert("Connection error to the database... please try again later.");
        }
      }
    }

    dashboardData();
    

  }, [session, status])

下面是我如何将数据和setData函数作为props传递给Products组件：

<Products data={data} setData={setData} />

下面是如何实际应用这些更改：

export default function Products({ data, setData }) {

  const products = data.products;

  const [allProducts, setAllProducts] = useState(products);
  const [displayProducts, setDisplayProducts] = useState(products);

  function updateProducts(newArray) {
    setAllProducts(newArray);
    setDisplayProducts(newArray);

     setData({...data, products: newArray})
  }
}

绝对没有在其他类中调用setInitialData，它没有传递给任何组件，它严格地在数据库拉取时调用。