Question

我正在尝试显示已获取的数据。但我似乎无法在反应中显示嵌套对象的属性。有任何想法吗？如果我记录数据，我首先会得到一个未定义的数据，然后是正确的数据。我的猜测是我需要等待数据加载然后显示它。但确实适用于不在嵌套obj中的标题。

let i=1;
function a(i) {
  if (i > 5)
    return
  else
    b("message", i)
}

function b(s, f) {
  setTimeout(function timer() {
    console.log(s + " " + f + " seconds");
  }, f * 1000);
  a(++i);
}
a(i);

数据

function SingleBeneficiary({ match }) {

  const [data, setData] = useState({ data: []});
  const id = match.params.id

  useEffect(() => {
  async function fetchData() {
    const response = await fetch(`http://localhost:8081/v1/beneficiary/${id}`);
    const jsonData = await response.json()
    setData(jsonData)
    }
    fetchData();
  }, [])

  return (
 {data.title} // works
{data.address.careOf} // dont work

Answer 1

您应该在使用address之前先检查careOf是否具有data属性，因为第一次{data.address && data.address.careOf}将是未定义的，并且在第二次渲染中它将在api调用之后获得数据。

sudo rm -rf /myLogFolder/*

Answer 2

您可以这样尝试吗？我将初始数据设置为null，然后检查是否不为null。如果address可以为null，则需要进行其他null检查。

function SingleBeneficiary({ match }) {

  const [data, setData] = useState(null);
  const id = match.params.id

  useEffect(() => {
  async function fetchData() {
    const response = await fetch(`http://localhost:8081/v1/beneficiary/${id}`);
    const jsonData = await response.json()
    setData(jsonData)
    }
    fetchData();
  }, [])

    return (
      <div>
        {data && (
          <div>
            <p>data.title</p>
            <p>data.address.careOf</p>
          </div>
        )}
      </div>
    );
}

Answer 3

对于任何遇到类似问题的人（即通过 api 获取数据并且仅在第一次运行时，它会将数据显示为未定义，但在手动刷新后，它工作正常），这里是一个快速而粗略的补充可以考虑与 1.“Inline If with Logical && Operator”方法和 2. 使用 useState 检查 api 加载是否结束。有了这三个，我的就成功了。

尝试在应用的上一页中获取所需的数据；在这种情况下，请在“SingleBeneficiary”之前看到的任何页面中添加以下几行。

    const response = await fetch(`http://localhost:8081/v1/beneficiary/${id}`);
    const jsonData = await response.json()

也许这与 npm 缓存有关，但不确定发生了什么。

使用react钩子获取数据在嵌套的obj属性上返回未定义

3 个答案: