Javascript 获取新数组后组件未更新

我对ReactJS和JS都是新手

我有一个用API请求中的数据填充的表。每行都有一个删除按钮，用于删除该特定条目。当您按下delete按钮时，会打开一个模式，要求您确认操作，如果单击YES，则删除请求将传递给API，新的GET请求将被请求给API以检索新更新的元素列表，模式将关闭，您应该会看到新更新的表

或者至少，这是应该发生的事情

现在，当我确认删除操作时，模式将关闭，但表不会更新，但是如果我刷新页面，表将显示更新的内容，而不显示删除的条目，因此除了表在确认后未更新外，所有内容似乎都正常工作

如果我按F5手动刷新页面，则此代码有效：

useImperativeHandle(ref, () => {
    return {
      updateTable: () => {
        fetchData();
        setTimeout(() => {
          fetchData();
        }, 200);
      },
    };
  });

export function getCategoryList(myToken) {
  return Promise.resolve(axios.get(CATEGORY_ENDPOINT, config(myToken)));
}

const closeAndDelete = (id) => {
    deleteCategory(id, getUserToken()).then(() => {
      prop.updateTable();
      prop.closeModal();
    });
  };

function TableCategory(prop, ref) {
  const [info, setInfo] = useState([]);

  useImperativeHandle(ref, () => {
    return {
      updateTable: () => {
        fetchData();
      },
    };
  });

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    await getCategoryList(UserService.getUserToken()).then((response) =>
      setInfo(response.data)
    );
  };

//MORE CODE INVOLING RENDERING THE TABLE AND HANDLING THE DATA. NOT RELEVANT TO THE QUESTION//

}

现在，如果我尝试在延迟后再次“模拟刷新”运行fetchData（），它将正常工作，并且组件将在模式关闭后更新，而无需手动刷新页面。我假设我没有像应该的那样处理异步行为

此代码无需手动刷新即可工作：

useImperativeHandle(ref, () => {
    return {
      updateTable: () => {
        fetchData();
        setTimeout(() => {
          fetchData();
        }, 200);
      },
    };
  });

export function getCategoryList(myToken) {
  return Promise.resolve(axios.get(CATEGORY_ENDPOINT, config(myToken)));
}

const closeAndDelete = (id) => {
    deleteCategory(id, getUserToken()).then(() => {
      prop.updateTable();
      prop.closeModal();
    });
  };

function TableCategory(prop, ref) {
  const [info, setInfo] = useState([]);

  useImperativeHandle(ref, () => {
    return {
      updateTable: () => {
        fetchData();
      },
    };
  });

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    await getCategoryList(UserService.getUserToken()).then((response) =>
      setInfo(response.data)
    );
  };

//MORE CODE INVOLING RENDERING THE TABLE AND HANDLING THE DATA. NOT RELEVANT TO THE QUESTION//

}

这是执行对API的请求的异步方法：

useImperativeHandle(ref, () => {
    return {
      updateTable: () => {
        fetchData();
        setTimeout(() => {
          fetchData();
        }, 200);
      },
    };
  });

export function getCategoryList(myToken) {
  return Promise.resolve(axios.get(CATEGORY_ENDPOINT, config(myToken)));
}

const closeAndDelete = (id) => {
    deleteCategory(id, getUserToken()).then(() => {
      prop.updateTable();
      prop.closeModal();
    });
  };

function TableCategory(prop, ref) {
  const [info, setInfo] = useState([]);

  useImperativeHandle(ref, () => {
    return {
      updateTable: () => {
        fetchData();
      },
    };
  });

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    await getCategoryList(UserService.getUserToken()).then((response) =>
      setInfo(response.data)
    );
  };

//MORE CODE INVOLING RENDERING THE TABLE AND HANDLING THE DATA. NOT RELEVANT TO THE QUESTION//

}

如果您还需要查看其他内容，请告诉我，我只发布了我认为与问题相关的内容

---

谢谢

我认为你的问题在于：

 useEffect(() => {
    fetchData();
  }, []);

这个空数组只对刷新作出一次反应，所以尝试向它传递道具

    useEffect(() => {
    fetchData();
  }, [info]);

应该有用

近距离观察：在接下来的步骤中，请看最后的部分

效果挂钩在组件安装时运行，但在 组件更新

因为您传递了空数组

[]

，所以

useffect

在

表
装入时只运行一次

但您希望组件更新，效果会再次运行。这就是为什么您可以为effect钩子提供
info
state第二个参数，以便在组件更新时激活它，而不仅仅是为了安装组件

useEffect(() => {
    fetchData();
  }, [info]);

所以，我想我已经明白了

结果我对承诺处理得很糟糕。我没有等待删除请求承诺的解决。我正在请求一个新的“信息”，其中包含与删除前相同的数据。代码实际上按照预期的那样工作。这就是为什么如果我再次延迟运行fetchData（），表就会更新

这个链接帮助我理解我做错了什么


我把工作代码留在下面

此函数发出删除请求；解析时，它会触发一个GET请求来更新表{fetchData（）}的数据，并关闭模式：

useImperativeHandle(ref, () => {
    return {
      updateTable: () => {
        fetchData();
        setTimeout(() => {
          fetchData();
        }, 200);
      },
    };
  });

export function getCategoryList(myToken) {
  return Promise.resolve(axios.get(CATEGORY_ENDPOINT, config(myToken)));
}

const closeAndDelete = (id) => {
    deleteCategory(id, getUserToken()).then(() => {
      prop.updateTable();
      prop.closeModal();
    });
  };

function TableCategory(prop, ref) {
  const [info, setInfo] = useState([]);

  useImperativeHandle(ref, () => {
    return {
      updateTable: () => {
        fetchData();
      },
    };
  });

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    await getCategoryList(UserService.getUserToken()).then((response) =>
      setInfo(response.data)
    );
  };

//MORE CODE INVOLING RENDERING THE TABLE AND HANDLING THE DATA. NOT RELEVANT TO THE QUESTION//

}

这将公开updateTable（）函数；并从API中获取数据；解决此问题后，它将数据存储在信息状态：

useImperativeHandle(ref, () => {
    return {
      updateTable: () => {
        fetchData();
        setTimeout(() => {
          fetchData();
        }, 200);
      },
    };
  });

export function getCategoryList(myToken) {
  return Promise.resolve(axios.get(CATEGORY_ENDPOINT, config(myToken)));
}

const closeAndDelete = (id) => {
    deleteCategory(id, getUserToken()).then(() => {
      prop.updateTable();
      prop.closeModal();
    });
  };

function TableCategory(prop, ref) {
  const [info, setInfo] = useState([]);

  useImperativeHandle(ref, () => {
    return {
      updateTable: () => {
        fetchData();
      },
    };
  });

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    await getCategoryList(UserService.getUserToken()).then((response) =>
      setInfo(response.data)
    );
  };

//MORE CODE INVOLING RENDERING THE TABLE AND HANDLING THE DATA. NOT RELEVANT TO THE QUESTION//

}

useffect
运行一次（仅当安装组件时）。但是您需要修改
useffect
，以便在每次表更新其数据时执行（在您的例子中为info）。在依赖项数组中使用info会生成一个无限循环。我认为这是因为fetchData（）每次都生成一个新数组，即使内容相同，对象也不同。我似乎找不到办法来避免这种循环。