React native 从上一页导航到该页时，faceShape.map不是一个函数

我正在用react native开发一个应用程序。 我通过请求get-through api获取数据。 我想做的是，当它从上一页转到该页时，立即在屏幕上显示它。 但是，当您进入页面时，会出现“faceShape.map不是函数”错误。 这是我写的代码

const [faceShape, setFaceShape] = useState();
  axios(config)
    .then(function (res) {
      let face = [];
      res.data.data.map((u) => {
        switch (u.faceType) {
          case "circle":
            face.push({ faceType: "둥근형", imgUrl: u.imgUrl });
            break;
          case "egg":
            face.push({ faceType: "계란형", imgUrl: u.imgUrl });
            break;
          case "square":
            face.push({ faceType: "사각형", imgUrl: u.imgUrl });
            break;
          case "reverseTriangle":
            face.push({ faceType: "역삼각형", imgUrl: u.imgUrl });
            break;
        }
      });
      setFaceShape(face);
    })
(...)
 {faceShape.map((data) => (
            <>
              <TouchableHighlight style={styles.skincolorcontainer}>
                <>
                  <SvgCssUri uri={data.imgUrl} width="50%" height="20%" />
                  <Text style={styles.skintext}>{data.faceType}</Text>
                </>
              </TouchableHighlight>
            </>
          ))}

const[faceShape，setFaceShape]=useState（）；
axios（配置）
.然后（功能（res）{
让脸=[]；
res.data.data.map（（u）=>{
开关（u.faceType）{
案例“圆圈”：
face.push（{faceType:“둥근형", imgUrl:u.imgUrl}）；
打破
案例“鸡蛋”：
face.push（{faceType:“계란형“，imgUrl:u.imgUrl}）；
打破
案例“方形”：
face.push（{faceType:“사각형“，imgUrl:u.imgUrl}）；
打破
案例“反向角度”：
face.push（{faceType:“역삼각형“，imgUrl:u.imgUrl}）；
打破
}
});
setFaceShape（面）；
})
(...)
{faceShape.map（（数据）=>(
{data.faceType}
))}

我想知道为什么当我第一次进入页面时，数据没有立即被读取。

---

请给我一个答案。

试试这样的办法

import { useEffect } from "react"; // At the top

(...)

const [faceShape, setFaceShape] = useState([]);

useEffect(() => {
  const unsubscribe = navigation.addListener("focus", () => {
    GetData();
  });

  return unsubscribe;
}, [navigation]);

const GetData = async () => {
  try {
    axios(config).then(function (res) {
      let face = [];
      res.data.data.map((u) => {
        switch (u.faceType) {
          case "circle":
            face.push({ faceType: "둥근형", imgUrl: u.imgUrl });
            break;
          case "egg":
            face.push({ faceType: "계란형", imgUrl: u.imgUrl });
            break;
          case "square":
            face.push({ faceType: "사각형", imgUrl: u.imgUrl });
            break;
          case "reverseTriangle":
            face.push({ faceType: "역삼각형", imgUrl: u.imgUrl });
            break;
        }
      });
      setFaceShape(face);
    });
  } catch (error) {}
};

(...)

{
  faceShape.map((data) => (
    <>
      <TouchableHighlight style={styles.skincolorcontainer}>
        <>
          <SvgCssUri uri={data.imgUrl} width="50%" height="20%" />
          <Text style={styles.skintext}>{data.faceType}</Text>
        </>
      </TouchableHighlight>
    </>
  ));
}

import{useffect}来自“react”；//顶部
(...)
const[faceShape，setFaceShape]=useState（[]）；
useffect（（）=>{
const unsubscribe=navigation.addListener（“焦点”，（）=>{
GetData（）；
});
退订；
}，[导航]；
const GetData=async（）=>{
试一试{
axios（配置）。然后（函数（res）{
让脸=[]；
res.data.data.map（（u）=>{
开关（u.faceType）{
案例“圆圈”：
face.push（{faceType:“둥근형“，imgUrl:u.imgUrl}）；
打破
案例“鸡蛋”：
face.push（{faceType:“계란형“，imgUrl:u.imgUrl}）；
打破
案例“方形”：
face.push（{faceType:“사각형“，imgUrl:u.imgUrl}）；
打破
案例“反向角度”：
face.push（{faceType:“역삼각형“，imgUrl:u.imgUrl}）；
打破
}
});
setFaceShape（面）；
});
}捕获（错误）{}
};
(...)
{
faceShape.map（（数据）=>(
{data.faceType}
));
}

---

我在这里做的是，每当这个屏幕进入

focus

时，它都会获取数据并更新它。

我解决了它。我认为这是一个错误。=>useState（[]）