使用反应钩子获取数据在嵌套的 obj 属性上返回 undefined

Posted 2023-02-22

【中文标题】使用反应钩子获取数据在嵌套的 obj 属性上返回 undefined

【英文标题】：fetching data with react hook returns undefined on nested obj properties

【发布时间】：2020-02-02 18:37:00

【问题描述】：

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

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

数据

 
  "title":"myTitle",
  "address":
    "careOf": "my adress"
  

【问题讨论】：

最好使用useReducer来管理javascript对象或数组作为状态，+在setData之前控制台化json数据，输出是否正确？

记录响应数据，告诉我们你得到了什么

记录响应和状态数据它给出了什么？

如果我在获取它返回正确数据后直接记录 jsonData ????

在执行异步操作时盲目设置状态之前，您应该真正检查component is still mounted useIsMounted 的代码是否为here

【参考方案1】：

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

data.address && data.address.careOf

【参考方案2】：

你可以这样试试吗？ 我将初始数据设置为空，作为回报，我检查它是否不为空。 如果地址可以为空，则需要额外的空检查。

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>
    );

【讨论】：

我不太明白那个语法？返回（不工作

@csk87 这种技术被称为 Inline If with Logical && Operator。您可以在 reactjs 文档中阅读更多相关信息。 reactjs.org/docs/…

【参考方案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 缓存有关，但不确定发生了什么。