javascript - 有没有办法在客户端检索和保存服务器响应（使用 Node.js 和 React Native）

Question

我有一个帖子请求：

router.post("/projects", async (req, res) => {
  const {
    projectName,
    projectDescription,
    projectBudget,
    projectDuration,
    industry,
    companyName,
    numberOfEmployees,
    diamond,
  } = req.body;
  console.log(diamond);

//diamond is an array having structure like this: diamond[ { criteria: {...} } ]

  const [projectDiamond] = diamond;

  const { criteria } = projectDiamond;

  if (
    !projectName ||
    !projectDescription ||
    !projectBudget ||
    !projectDuration ||
    !industry ||
    !companyName ||
    !numberOfEmployees ||
    !diamond
  ) {
    return res.status(422).send({ error: "Must provide all project details" });
  }

  try {
    const project = new Project({
      projectName,
      projectDescription,
      projectBudget,
      projectDuration,
      industry,
      companyName,
      numberOfEmployees,
      diamond,
      userId: req.user._id,
    });

    const recommendation = await Recommendation.find({
      "diamond.criteria": criteria,
    }); //Need to render this on front-end somehow!
    const projectsWithSameDiamond = await Project.find({
      "diamond.criteria": criteria,
    }); //Need to render this on front-end somehow!
    
    const projectsWithSameIndustry = await Project.find({ industry }); //Need to render this on front-end somehow!
    
    console.log(res);
    
    

    res.send(
      `Your project:\n\n${project}\n\nSimilar industry: ${projectsWithSameDiamond}\n\nSimilar diamonds: ${projectsWithSameIndustry}\n\nRecommendation: ${recommendation}`
    );
  } catch (err) {
    res.status(422).send({ error: err.message });
  }
});

如您所见，我发送了许多变量作为响应。我想在反应原生项目的组件中检索它们。我可以做这样的事情：

const A = () => {
 
              axios.post("/projects", {
                projectName,
                projectDescription,
                projectBudget,
                projectDuration,
                industry,
                companyName,
                numberOfEmployees,
                diamond,
              })
              .then((result) => {
                console.log("I am result!");
                console.log(result.data);
              })
              .catch((err) => {
                console.log(err.response.data);
              });
    

}

现在result我可以检索数据，但我想检索、存储和呈现我放在前端响应中的三个变量？如何检索和存储它们？

例如像这样：

const A = () => {
 ...
 return(
 <Text>{recommendation}<Text>
 <Text>{projectWithSimilarDiamond}<Text>
 <Text>{projectWithSimilarIndustry}</Text>
);

}

我怎么可能做到这一点？我现在很无知。

标签： javascriptnode.jsreact-nativemongooseaxios

Answer 1

您应该使用res.json()从 API 返回 JSON 而不是纯文本。这样，您可以控制它在您的应用程序上的外观。

res.json({
  project,
  projectsWithSameDiamond,
  projectsWithSameIndustry,
  recommendation,
});

对于 API 调用部分，您需要返回 Promise 对象以将其传递给函数的用户。

const fetchData = () => {
  return axios
    .post("/projects", {
      projectName,
      projectDescription,
      projectBudget,
      projectDuration,
      industry,
      companyName,
      numberOfEmployees,
      diamond,
    })
    .then((result) => {
      return result.data;
    })
    .catch((err) => {
      console.log(err.response.data);
    });
};

最后是 React 部分，你需要一个 useState ()和useEffect()的功能组件。

const AComponent = () => {
  const [projects, setProjects] = useState();

  useEffect(() => {
    fetchData().then((response) => {
      setProjects(response);
    });
  }, []); // you need to define dependency

  if (!projects) {
    // Show loading message untill you get the data
    return <Text>Now loading ...</Text>;
  }

  return (
    <>
      <Text>{projects.recommendation}</Text>
      <Text>{projects.projectsWithSameDiamond}</Text>
      <Text>{projects.projectsWithSameIndustry}</Text>
    </>
  );
};

关于AsyncStorage，我不熟悉。但是我相信您可以将其与fetchData()缓存层之类的功能集成在一起。

const cachedFetchData = async (...args) => {
  const storageKey = "@projects/" + projectName

  // Check if the data is stored on AsyncStorage
  const cached = AsyncStorage.getItem(storageKey)
  if (cached) {
      return JSON.parse(cached)
  }

  // If there is no cache, fetch the data from the APIA
  const data = await fetchData(...args)

  // Then store the data on AsyncStorage
  AsyncStorage.setItem(storageKey, JSON.stringify(data))

  return data