Question

好吧，让我们分几部分...我正在尝试使用Medium API中的数据。问题是我无法在组件中显示特定的JSON值。

我需要：

标题
链接
图片（缩略图）

来自特定媒体的每个帖子。 API示例：
https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@mikaeriohana

我的代码在这里：

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

function App() {

  const [mediumData, setMediumData] = useState([]);

  const getData = async () => {
    const res = await axios.get(
      "https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@mikaeriohana"
    );
    setMediumData(res.data.items);
  };

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

  return (
    <div className="App">
      <h1>Tile 01: </h1>
      <p>Link 01: </p>
      <img src="" alt="img"/>
    </div>
  );

}

export default App;

我可以使用map（）函数一次获取所有数据，但是我只需要第一篇文章中的数据。

当我尝试指定值时，将返回以下错误：

{console.log(mediumData.link)}
<h1>Tile 01: {mediumData[0].title}</h1>
<p>Link 01: </p>

我的错误总是：

undefined

or

TypeError: Cannot read property 'title' of undefined

Answer 1

您的数据无法立即获得。您正在异步获取它，因此您需要让您的组件能够处理没有东西的情况。

<h1>Tile 01: {mediumData[0]?.title || ""}</h1>
<p>Link 01: </p>

我只是在使用可选的链接运算符?.，它会检查以确保要访问的值。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

mediumData[0]?.title || ""的意思是给我一个标题，如果mediumData[0]存在并且标题存在或者只是返回一个空字符串""。

在获取数据时，这是在标题中填充一个空字符串。标题可用后，组件将更新并显示标题。

Answer 2

对于第一个渲染，数组为空，因此应检查是否具有值：

2020-08-26T12:14:02: %EASYPY-ERROR: Caught error during task execution: Task-2: id_cip_test1.py
2020-08-26T12:14:02: %EASYPY-ERROR: Traceback (most recent call last):
2020-08-26T12:14:02: %EASYPY-ERROR:   File "/users/alpeck/pyats3.6/lib/python3.6/site-packages/pyats/aetest/main.py", line 187, in run
2020-08-26T12:14:02: %EASYPY-ERROR:     testscript = TestScript.from_source(self.testable, self.reporter)
2020-08-26T12:14:02: %EASYPY-ERROR:   File "/users/alpeck/pyats3.6/lib/python3.6/site-packages/pyats/aetest/script.py", line 68, in from_source
2020-08-26T12:14:02: %EASYPY-ERROR:     module = loader.load(testable)
2020-08-26T12:14:02: %EASYPY-ERROR:   File "/users/alpeck/pyats3.6/lib/python3.6/site-packages/pyats/utils/import_utils/flex.py", line 64, in load
2020-08-26T12:14:02: %EASYPY-ERROR:     module = self.load_module_from_file(obj)
2020-08-26T12:14:02: %EASYPY-ERROR:   File "/users/alpeck/pyats3.6/lib/python3.6/site-packages/pyats/utils/import_utils/flex.py", line 117, in load_module_from_file
2020-08-26T12:14:02: %EASYPY-ERROR:     module = loader.load_module()
2020-08-26T12:14:02: %EASYPY-ERROR:   File "<frozen importlib._bootstrap_external>", line 399, in _check_name_wrapper
2020-08-26T12:14:02: %EASYPY-ERROR:   File "<frozen importlib._bootstrap_external>", line 823, in load_module
2020-08-26T12:14:02: %EASYPY-ERROR:   File "<frozen importlib._bootstrap_external>", line 682, in load_module
2020-08-26T12:14:02: %EASYPY-ERROR:   File "<frozen importlib._bootstrap>", line 265, in _load_module_shim
2020-08-26T12:14:02: %EASYPY-ERROR:   File "<frozen importlib._bootstrap>", line 684, in _load
2020-08-26T12:14:02: %EASYPY-ERROR:   File "<frozen importlib._bootstrap>", line 665, in _load_unlocked
2020-08-26T12:14:02: %EASYPY-ERROR:   File "<frozen importlib._bootstrap_external>", line 678, in exec_module
2020-08-26T12:14:02: %EASYPY-ERROR:   File "<frozen importlib._bootstrap>", line 219, in _call_with_frames_removed
2020-08-26T12:14:02: %EASYPY-ERROR:   File "/users/alpeck/pyats/Automation/CIP_Automation/cip_sanity/17_4/petra/id_cip_test1.py", line 40, in <module>
2020-08-26T12:14:02: %EASYPY-ERROR:     client = plc.PLCClient(str(cip_interface.connections['a'].ip))
2020-08-26T12:14:02: %EASYPY-ERROR:   File "/users/alpeck/pyats3.6/lib/python3.6/site-packages/plc.py", line 65, in __init__
2020-08-26T12:14:02: %EASYPY-ERROR:     self.sock.send( bytes(sessionpkt,'utf-8'))
2020-08-26T12:14:02: %EASYPY-ERROR: TypeError: encoding without a string argument

React.js-如何从对象数组访问特定值

2 个答案: