Reactjs 使用useEffect向api终结点发送get请求未获取数据

我有一个返回数据数组的api端点
我想在react本机组件首次装载时对此端点发出get请求。
我尝试在

useffect

中执行此操作，使用

axios

异步执行HTTP请求。
确实执行了

useffect

，但我不确定是否发出过请求（看起来不是这样，因为

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>
        );
      }}
    />
  );
}

导出默认函数App（）{
let[items，setItems]=useState（{}）；
//获取挂载上的数据
useffect（（）=>{
console.log（“useffect run”）；/------------这是记录的
常量配置={
标题：{
“x-auth-token”：
“一些代币”，
},
};
异步（）=>{
console.log（“此处”）/------------从未运行过！！为什么？？
试一试{
const res=wait axios.get（“/api/consultations”，config）；
（一些数据处理代码…）
控制台日志（项目）；
//更新状态为的项目
设置项目（项目）；
}捕捉（错误）{
//服务器错误
控制台错误（err）；
}
};
}，[项目]；
返回(
{
返回；
}}
renderEmptyData={（）=>{
返回(
没有预约
);
}}
/>
);
}

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

`

---

您定义了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>
        );
      }}
    />
  );
}

导出默认函数App（）{
let[items，setItems]=useState（{}）；
//获取挂载上的数据
useffect（（）=>{
console.log（“useffect run”）；/------------这是记录的
常量配置={
标题：{
“x-auth-token”：
“一些代币”，
},
};
（异步（）=>{
console.log（“此处”）/------------从未运行过！！为什么？？
试一试{
const res=wait axios.get（“/api/consultations”，config）；
（一些数据处理代码…）
控制台日志（项目）；
//更新状态为的项目
设置项目（项目）；
}捕捉（错误）{
//服务器错误
控制台错误（err）；
}
})()
}，[项目]；
返回(
{
返回；
}}
renderEmptyData={（）=>{
返回(
没有预约
);
}}
/>
);
}

---

试试这个，在自动函数调用中封装异步函数。

给异步函数一个名称（在useffect内部或外部），然后在内部调用它useEffect@Aymen工作！现在它返回了一个

网络错误

哈哈，但是日志并没有真正的帮助。当react native中出现网络错误时，我应该如何进行调试？您可以使用Flipper我第一次这样做。React native说我不能把异步放在那里，我应该在里面定义一个异步函数并调用它。我的问题的原因是从未调用annonymous异步函数@艾曼的评论奏效了。谢谢你的帮助！

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>
        );
      }}
    />
  );
}