Question

我有一个api端点，该端点返回数据数组。
我想在第一次安装本机组件时对此端点发出get请求。
我尝试在useEffect中执行此操作，并通过异步执行的axios发出了HTTP请求。
useEffect确实被执行了，但是我不确定请求是否曾经发出过（看起来不是这样，因为其中的console.log从未执行过）。

请求从未到达确定的端点。

这是代码：

export default function App() {
  let [items, setItems] = useState({});
  // fetch data on mount
  useEffect(() => {
    console.log("useEffect ran"); // ---------- this was logged
    const config = {
      headers: {
        "x-auth-token":
          "some-token",
      },
    };
    async () => {
      console.log("here") // ---------- NEVER RAN!! WHY??
      try {
        const res = await axios.get("/api/consultations", config);
        
        (some data processing code...)

        console.log(items);

        // update items in state
        setItems(items);
      } catch (err) {
        // Server error
        console.error(err);
      }
    };
  }, [items]);

  return (
    <Agenda
      style={styles.calendarList}
      items={items}
      renderItem={(item) => {
        return <ConsultationMeeting meeting={item} />;
      }}
      renderEmptyData={() => {
        return (
          <View style={styles.message}>
            <Text style={{ ...styles.mediumFont, color: "gray" }}>
              No Scheduled Appointment
            </Text>
          </View>
        );
      }}
    />
  );
}

Answer 1

您定义了api调用，但从未调用过

export default function App() {
  let [items, setItems] = useState({});
  // fetch data on mount
  useEffect(() => {
    console.log("useEffect ran"); // ---------- this was logged
    const config = {
      headers: {
        "x-auth-token":
          "some-token",
      },
    };
    (async () => {
      console.log("here") // ---------- NEVER RAN!! WHY??
      try {
        const res = await axios.get("/api/consultations", config);
        
        (some data processing code...)

        console.log(items);

        // update items in state
        setItems(items);
      } catch (err) {
        // Server error
        console.error(err);
      }
    })()
  }, [items]);

  return (
    <Agenda
      style={styles.calendarList}
      items={items}
      renderItem={(item) => {
        return <ConsultationMeeting meeting={item} />;
      }}
      renderEmptyData={() => {
        return (
          <View style={styles.message}>
            <Text style={{ ...styles.mediumFont, color: "gray" }}>
              No Scheduled Appointment
            </Text>
          </View>
        );
      }}
    />
  );
}

尝试一下，在自动函数调用中包装异步函数。

Answer 2

尝试使用异步使用效果，而不是中间效果。

`

export default function App() {
  let [items, setItems] = useState({});
  // fetch data on mount`enter code here`
  useEffect(async () => {`enter code here`
    console.log("useEffect ran"); // ---------- this was logged
    const config = {
      headers: {
        "x-auth-token":
          "some-token",
      },
    };

      console.log("here") // ---------- NEVER RAN!! WHY??
      try {
        const res = await axios.get("/api/consultations", config);
        
        (some data processing code...)

        console.log(items);

        // update items in state
        setItems(items);
      } catch (err) {
        // Server error
        console.error(err);
      }
   
  }, [items]);`

使用useEffect将获取请求发送到api端点未获取数据

2 个答案: