时间戳

首页 > 解决方案 > 即使将获取数据转换为数组，我也无法访问这些元素

javascript - 即使将获取数据转换为数组，我也无法访问这些元素

问题描述

使用此代码从外部 API 获取某些日期后

let fetchedData = [];

fetch(api)
    .then(res => res.json())
    .then(res => JSON.parse(res.response))
    .then(arr =>  arr.map(e => fetchedData.push(e)) )
    .catch(err => err);

fetchedData填充没有任何问题，此时里面的数据看起来像这样

    {
        Key: '0',
        Record: {
            a: 'a0',
            b: 'b0'
        }
    },
    {
        Key: '1',
        Record: {
            a: 'a1',
            b: 'b1'
        }
    },
    {
        Key: '2',
        Record: {
            a: 'a2',
            b: 'b2'
        }
    }

对于console.log(fetchedData)chrome 工具显示类似的内容：

[]
0: {Key: "0", Record: {…}}
1: {Key: "1", Record: {…}}
2: {Key: "2", Record: {…}}
length: 3
__proto__: Array(0)

但是如果我想访问和提取这个数组，console.log(fetchedData[0]) 那么我将显示为undefined 或console.log(fetchedData.length)显示0

但在同一个脚本中，下一次调用console.log(fetchedData)显示像以前一样的正常数组

结果是我有 chrome 工具

array
undefined
array

使用前面提到的代码

标签： javascriptreactjsecmascript-6fetch

解决方案

发生这种情况的原因是因为您正在执行异步操作， fetch 返回一个承诺，因此 async 意味着它将在同步代码运行后运行：在此示例中它将在运行后js let fetchedData = [];运行。如果这是有道理的。

要处理这种情况，您可以在 a js componentDidMount() {}或js useEffect(() => {})

这是一个示例，但请使用您的数据尝试@wokadakow 并检查结果！


function App() {
  const [data, setData] = useState([]);

  async function AsyncData() {
   // Here goes your async data, just replace it 
// this is fake data 
    return await [{
      id: 1,
      name: 'john'
    }]
  }

  useEffect(() => {
    AsyncData()
    .then((data) => setData(data))

  }, [])


  return (
    <div className="App">
      <h1> TEST DATA </h1>
      <ul>
        {data.map(d => {
           return <li key={d.id}> {d.name} </li> 
      })}
      </ul>

    </div>
  )
}

render(<App />, document.getElementById('root'));

我希望这有帮助！

推荐阅读