ReactJs无法从FETCH获取对象的值答案

【问题标题】：ReactJs Cannot get value of an object from FETCHReactJs无法从FETCH获取对象的值
【发布时间】：2019-10-17 14:33:26
【问题描述】：

我已经实现了 fetch 并将其设置为对象。但是，当我想获得它的价值时。它显示未定义，我对此一无所知。这是代码。

import {useEffect,useState} from 'react';
import { useRouter, Router } from 'next/router';
import Layout from '../../components/MyLayout';
import Settings from '../../components/Settings';

const Post = (props) => {

  const [object, setObject] = useState({});
  const router = useRouter();

  useEffect(
    () => {
      const data = router.query;
      const FormData = new URLSearchParams();
      FormData.append('slug',data.id);
      fetch(Settings.api+'viewPost',{
        method: 'POST',
        body: FormData
      })
        .then(res=>res.json())
        .catch(function(e){
            console.log(e)}
        )
        .then(obj=>{
            setObject(obj.data[0])
        })
    }
    , [router.query]
  )
  return (
    <Layout>
     <h1>{object.title}</h1> --> I would like to display here
    </Layout>
  );
}

export default Post;

反正这里是我要实现的json

{
  "page": 1,
  "total": 0,
  "data": [
    {
      "postId": 4,
      "boardId": "",
      "username": "test@email.com",
      "title": "How To Make Money",
      "slug": "how-to-make-money",
      "answer": 0,
      "checked": 0,
      "status": "",
      "waktu": "2019-10-16 04:45:30"
    }
  ]
}

这是错误

TypeError: 无法读取未定义的属性“标题”

我非常感谢任何答案。谢谢。

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

尝试只记录console.log(object)，您已经将object 状态的值设置为obj.data[0] 的任何值。

编辑：您可能可以在触发 useEffect 之前进行检查：

if (!object) {
  return <h1>Loading...</h1>
}

console.log(object.data[0])
return (
    <Layout>
      <h1>{router.query.id}</h1>
    </Layout>
  );

【讨论】：

console.log(object) 工作正常。但是，我想在它的对象中获得价值。它只能在“object.data”上工作。如果我走得更远，它就不起作用（object.data [0]）。无论如何，我只是添加了 json 输出来帮助您了解更多。还是谢谢你
我明白了。我被评论弄糊涂了。当你记录它时，它会被记录两次吗？
这是初始渲染时的问题。 object = {}.
对。 UseEffect 将在挂载后触发，因此初始值为{}，但应设置新值。
可能需要在退货前做个检查if (!data) return <h1>Loading...</h1>

【解决方案2】：

import {useEffect,useState} from 'react';
import { useRouter, Router } from 'next/router';
import Layout from '../../components/MyLayout';
import Settings from '../../components/Settings';

const Post = (props) => {

const [object, setObject] = useState({});
const router = useRouter();

useEffect(
   () => {
     const data = router.query;
     const FormData = new URLSearchParams();
     FormData.append('slug',data.id);
     fetch(Settings.api+'viewPost',{
       method: 'POST',
       body: FormData
     })
     .then(res=>res.json())
     .catch(function(e){
         console.log(e)}
     )
     .then(obj=>{
         setObject(obj.data[0])
     })
 }
, [router.query]
)
//console.log(object.data[0]); --> does not work here
return (
  <Layout>
    <h1>{router.query.id}</h1>
  </Layout>
);
} 

export default Post;

【讨论】：

谢谢，它有效。但是直接设置'obj'而不是'obj.data [0]'有什么不同。不支持多嵌套JSON吗？

【解决方案3】：

这可能是最初渲染时的问题。在 api 调用之前它可能没有数据。

你需要在使用前检查它

{ object && object.data[0]}

或者你可以在没有数据时显示加载

if (!data) return <span>Loading...</span>

【讨论】：