javascript - 如何在 React 中通过 API 请求更新数据后更新状态？

Question

我有一个小问题。我在一个运行良好的组件中获取数据:

const [item, setItem] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch("https://api/products")
      .then((response) => response.json())
      .then((data) => setItem(data))
      .finally(() => setLoading(false));
  }, []);

然后我在不同的组件中有这个 POST:

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await fetch("https://api/products", {
        method: "POST",
        headers: { admin: "true", "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
    } catch (error) {
      console.log("error");
    }
  };

如何在不重新加载网页的情况下使用 POST 获取第一个组件的新数据？

Answer 1

您需要能够将新数据 body 附加到 item 数组中，这意味着您需要调用此 setItem(prev => [.. .prev, body]) 在你的 try-catch 中，类似于:

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await fetch("https://api/products", {
        method: "POST",
        headers: { admin: "true", "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      setItem(prev => [...prev, body]); // here you add the new data
    } catch (error) {
      console.log("error");
    }
  };

现在您将如何访问此 setItem 函数？好吧，如果发出 POST 请求的组件是您有此行 const [item, setItem] = useState([]) 的组件的子组件，您可以传递 setItem 作为 Prop 。

如果不是这种情况，要么将此 const [item, setItem] = useState([]) 移动到作为所有这些组件的父组件的组件中，然后将您需要的内容作为 props 或使用像 context API 这样的状态管理解决方案.