当数据库中的数据发生变化时更新我的​​反应状态的最佳方法是什么？

Question

我正在使用 React 开发一个项目，当新数据插入我的数据库时，我需要使用 React hook 更新反应状态。我正在使用 contextAPI，但就我而言，我的组件的结构方式我无法使用从数据库返回的数据来更新该状态。这是我的代码的更多细节：

我有一个组件，其中数据与 useState 一起存在

const [questions, setQuestions] = useState([]);

  useEffect(() => {
    (async () => {
      const resp = await axios.get(
        `${process.env.REACT_APP_BACKEND_URL}/product/${productId}/question`
      );
      setQuestions(resp.data);
    })();
  }, []);

我还有另一个名为 PostQuestion 的组件，它将发布请求发送到我的后端并将新问题插入到我的数据库中。他们完全不知道彼此的存在。我们可以使用 contextAPI 将 props 传递给子级和嵌套子级。但 PostQuestion 组件不是所有问题数据都存在的组件的子组件。这就是我对 contextAPI 的理解。但它们都是另一个组件的子代。但我不想把我的

 const [questions, setQuestions] = useState([]);

在该组件中，该组件是这两个组件的父组件。我可以做什么来更新 PostQuestion 组件中的问题状态？

这是我的 PostQuestion 组件代码

const postQuestionHandler = async (e) => {
    e.preventDefault();

    try {
      const resp = await axios({
        url: `${process.env.REACT_APP_BACKEND_URL}/product/${productId}/question`,
        method: "POST",
        data: {
          question: questionInput.question.value,
          userId,
        },
      });
      if (resp.status === 200) {
        setShowForm(false);
      }
    } catch (err) {
      alert(err);
    }
  };

  return <SecondaryBtn disabled={questionInput.question.error}>
              Submit Your Question
    </SecondaryBtn>

概括

我有两个没有父子关系的组件。当我在组件 2 中取回新数据时，我想通过调用 setState 来更新组件 1 中的状态。我不想在这两个组件父组件中拥有状态，因为它已经足够混乱了。

如果我用Redux就不会出现这样的问题。也许在 contextAPI 中也有一种方法可以做到这一点。

Answer 1

多种解决方案：

1. 您可以每隔一段时间进行轮询。
2. 将状态存储在父组件中（在某些时候他们共享一个）并将其传递下去。
3. 使用全局状态管理工具，如redux或React 的上下文API。我会推荐 context API，因为它是内置的。