javascript 条件渲染热布线是否具有真/假值？[closed]

yb3bgrhw 于 2022-10-30 发布在 Java

关注(0)|答案(2)|浏览(124)

**已关闭。**此问题为not reproducible or was caused by typos。目前不接受答案。

这个问题是由一个打字错误或一个无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic，但这个问题的解决方式不太可能帮助未来的读者。
昨天关门了。
Improve this question
我目前正在练习使用API，我想知道为什么我的p标记没有在我的组件中呈现。
我相信我说的是“如果我有来自useEffect的数据，返回这些p标签，或者数据为真？返回p标签”不是这样吗？我没有得到返回的p标签。https://rickandmortyapi.com/documentation/#get-all-characters

import React, { useState, useEffect } from "react";
import axios from "axios";

const Characters = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios
      .get("https://rickandmortyapi.com/api/character")
      .then((res) => setData(res.data.result))
      .catch((err) => console.log(err));
  }, []);

  return (
    <div>
      {data && (
        <div>
          <p>Hello</p>
          <p>Hey There</p>
          <p>How Are you</p>
        </div>
      )}
    </div>
  );
};

export default Characters;

JavaScript

来源：https://stackoverflow.com/questions/74240576/conditional-rendering-does-hot-wiring-have-a-truthy-falsey-value

2条答案

按热度按时间

anauzrmj1#

你需要这样写数组，这样数据从数组中返回。对于数组需要检查长度

第一种方式

<div>
  {data?.length > 0 && (
    <div>
      <p>Hello</p>
      <p>Hey There</p>
      <p>How Are you</p>
    </div>
  )}
</div>

第二种方式

<div>
    {data?.length > 0 ? (
     <div>
       <p>Hello</p>
       <p>Hey There</p>
       <p>How Are you</p>
     </div>
    ): null}
</div>

赞(0）回复(0）举报 2022-10-30

vq8itlhq2#

我最近不得不处理一个类似的情况，但找不到任何有用的答案。
处理Promises的另一种方法是创建一个async函数和await，让你的Promise得到解析并得到它的实现值。除此之外，这个解决方案比链接then方法更清晰，更容易理解。你可以查看下面我的例子，如果有帮助的话，告诉我。

import React, { useState, useEffect } from "react";
import axios from "axios";

const Characters = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    const res = await axios.get("https://rickandmortyapi.com/api/character");
    setData(res);
  };

  return (
    <div>
      {data && (
        <div>
          <p>Hello</p>
          <p>Hey There</p>
          <p>How Are you</p>
        </div>
      )}
    </div>
  );
};

export default Characters;

您也可以使用try...catch进行错误行程。

const getData = async () => {
    try {
        const res = await axios.get("https://rickandmortyapi.com/api/character");
        setData(res);
    } catch (e) {
        console.log(e);
    }
};

赞(0）回复(0）举报 2022-10-30

我来回答

javascript 条件渲染热布线是否具有真/假值？[closed]

2条答案

第一种方式

第二种方式

相关问题

热门标签

最新问答