Question

我有一个表，它使用 Fetch 请求获取数据，一切正常，代码是使用 react 钩子和函数实现的，问题是当用户点击“F5”并刷新页面时，所有数据都被删除，我不知道如何检测刷新并将请求重新发送到服务器，如果有办法在页面刷新时使用反应函数/钩子再次获取请求？顺便说一句，我是初学者，对任何帮助都表示赞赏

/*Libraries*/
import React, { useState, useEffect } from "react";
import Avatar from "../Avatar";
import Loader from "react-loader-spinner";
const source = "/images/logo.png";
/*******************************************************************************************************/
export default function Info(props) {
  useEffect(() => {
    fetchItems();
  }, []);
  var toke = "Token " + props.token + " ";
  var url = "server";
  var url2 = "server/update";

  const requestOptions = {
    method: "GET",
    headers: { "Content-Type": "application/json", Authorization: toke },
  };

  const [items, setItems] = useState([]);
  const [status, setStatus] = useState("");

  const fetchItems = async () => {
    const data = await fetch(url, requestOptions).catch((error) =>
      console.error(error)
    );
    console.log(JSON.stringify(data));
    const items = await data.json();
    setItems(items);
    setStatus(data.status);
  };

  if (status == "200") {
    return (
      <div class="all">
        <div class="jumbotron text-center" style={styles}>
          <div class="testing" style={styles.testing}></div>

          <h2>Company's Name:{items.company_name}</h2>
          <Avatar avatarUrl={items.logo} />
        </div>

        <div class="container">
          <div class="row">
            <div class="col-sm-4">
              <h3>Company's Manager: </h3>
              <h6>Name:{items.manager.first_name}</h6>
              <h6>Last Name:{items.manager.second_name}</h6>
              <h6>Phone:{items.manager.phone}</h6>
              <h6>Email:{items.manager.email}</h6>
              <h6>Address:{items.manager.address}</h6>
            </div>

            <div class="col-sm-4">
              <h3>Deputy Director:</h3>
              <h6>Name:{items.deputy_director.first_name}</h6>
              <h6>Last Name:{items.deputy_director.second_name}</h6>
              <h6>Age:{items.deputy_director.age}</h6>
              <h6>Phone:{items.deputy_director.phone}</h6>
              <h6>Email:{items.deputy_director.email}</h6>
              <h6>Address:{items.deputy_director.address}</h6>
            </div>

            <div class="col-sm-4">
              <h3>Vehicles:</h3>
              {items.car.map((car, index) => (
                <div>
                  <h6>license number:{car.license_no}</h6>
                  <h6>license due to:{car.license_expiry_date}</h6>
                  <h6>Bituah due to:{car.insurance_expiry_date}</h6>
                  <h6>
                    Bituah till age:[number from 20-70] {car.insurance_age}
                  </h6>
                  <h6>
                    Photo:
                    <Avatar avatarUrl={car.image} />
                  </h6>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  } else {
    return (
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center",
          marginTop: "100px",
        }}
      >
        <Loader
          type="Puff"
          color="#343a40"
          height={150}
          width={150}
          timeout={3000} //3 secs
        />
      </div>
    );
  }
}

Answer 1

如果您将 fetch 方法放入 useEffect 中，那么每次刷新时都应向服务器发送数据请求。

useEffect(() => fetch(), [])

但如果你分享你的代码，我们会变得更聪明。

Answer 2

如果我们有你的代码就好了

Answer 3

我终于找到了答案，useEffect 确实在刷新时重新发送请求，但问题是我的请求需要从 props 传递的令牌，而 useffect 仅在几秒钟后更新 probs，所以我的解决方案只是使用 useEffect当道具被加载时。感谢大家帮助我更好地理解 useEffect，修复是：

     useEffect(() => {
     if(props.token){fetchItems()}
  }, [props.token]);

React 在页面重新加载时向服务器重新发送请求

3 个答案: