使用钩子和承诺后如何从.json映射信息答案

【问题标题】：How to map info from .json after using hook and promises使用钩子和承诺后如何从.json映射信息
【发布时间】：2021-05-15 07:13:43
【问题描述】：

我有一个像这样的data.json 文件：

"valid": true,
  "timestamp": 1582195447,
  "base": "USD",
  "rates": {
    "AED": 3.67338,
    "AFN": 77.8079
}

我正在模拟以这种方式从后端接收数据。

import data from './data.json';

function App1(){
    const promise = new Promise(
        (resolve, reject) =>{
            setTimeout(()=>{
                console.log('Preparing...');
                resolve(data)
            }, 2000)
        }
    )
    promise.then(clientData =>{
        console.log('Promise resolved', clientData);
        
    })
    
    return(
        <div>
            <ul>
                 
            </ul>
              
        </div>
    )
}

我也尝试过这样做：

import data from './data.json';
import React, {useState} from 'react';

function App1(){
    const [state, setState] = useState('');
    const promise = new Promise(
        (resolve, reject) =>{
            setTimeout(()=>{
                setState(data);
                resolve(state);
            }, 2000)
        }
    )
    promise.then(clientData =>{
        console.log('Promise resolved', clientData);
        let newArr = clientData.toA
        setState(clientData);
        
    })
    
    return(
        <div>
            <ul>
                {state ? state.map(item => <li key={item.id}>{item.name}</li> ) : 'Loading data...'} 
            </ul>
              
        </div>
    )
}

export default App1;

但这会抛出TypeError: state.map is not a function。

我到底做错了什么？

【问题讨论】：

有很多问题：如果你console.log(data) 会发生什么？你从哪里得到名字和身份证？你知道 React 钩子吗？尝试搜索 useEffect()
@PixAff {valid: true, timestamp: 1582195447, base: "USD", rates: {…}} base: "USD" rates: {AED: 3.67338, AFN: 77.8079, ALL: 113.23065, AMD: 478.14251, ANG: 1.78845, …} timestamp: 1582195447 valid: true __proto__: Object 它是console.log(data)

标签： javascript reactjs react-hooks

【解决方案1】：

Promise 是异步的。当你的组件存在并且 React 尝试渲染它时，有很短的时间跨度，但是来自服务器的数据还没有到达。在此期间，您的state 仍未被来自服务器的响应填充，并且仍然具有默认值，您已使用useState('') 将其设置为空字符串。字符串没有map 方法，因此您会收到错误“state.map”不是函数——它是undefined。在控制台中尝试''.map 来查看。

最快的解决方法是使用useState([])。

另一种可能性是使用useState(null) 作为开头，然后在state 是null 时向用户显示加载指示器。

【讨论】：

对不起，我没有注意到我需要显示不在控制台中的所有信息，我必须在网页上显示它，请告诉我如何做到这一点（这个延迟，如控制台）需要将其显示在列表或表格中。我也试过你的解决方案，但不幸的是它没有帮助我
控制台也有延迟，只是你看不到而已。了解 promises 以及它们是如何工作的。我的解决方案不适用于控制台（不知道你从哪里得到的）。
我的意思是我想在我的网页上看到延迟（2000 毫秒）。错误是一样的state.map is not a function

【解决方案2】：

如果你想模拟从 api 获取数据，你应该在 hook 内进行：

    import data from './data.json';
import {useEffect, useState} from "React"
    
    function App1(){
const [myData, setMyData] = useState([]);

useEffect(() => {
         async function getDatafromApi() {
           const res = await // your api call (returns data)
           setMyData(data) // in your case since you have no api
           // setMyData(res) This is what you would do if you had an api
         }
         getDataFromApi();
},[myData])
        
        
        return(
            <div>
                <ul>
                     
                </ul>
                  
            </div>
        )
    }

export default App1

但仍然 - 如果您的数据不包含 name 或 id，它将无法正常工作！

【讨论】：