TypeError：updates.map 不是 ReactJS 中的函数答案

【问题标题】：TypeError: updates.map is not a function in ReactJSTypeError：updates.map 不是 ReactJS 中的函数
【发布时间】：2021-02-20 15:10:30
【问题描述】：

Widgets.js

import React, {useContext} from 'react';
    import { DataContext } from '../contexts/DataContext';
    
    
    const Widgets = () => {
        const {updates} = useContext(DataContext);
        console.log(updates);
        return (
            <div className="MainWidget">
                <ul>
                    {updates.map(update => {
                        return (
                          <div>
                            <li>{update.current.condition}</li>
                            <p>{update.current.temp_c}</p>
                          </div>
                        );
                    })}
                </ul>
            </div>
        );
    }
    
    export default Widgets;

我正在从返回错误的 API 映射数据：TypeError: updates.map is not a function，但实际上它使用 console.log() 函数在控制台中返回数据。

DataContext.js :我正在使用 axios 从 weatherapi.com 获取数据并使用“setUpdates”功能设置状态“更新”。

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

export const DataContext = createContext();

const DataContextProvider = (props) => {
    const [updates, setUpdates] = useState({});
    const url = "https://api.weatherapi.com/v1/current.json?key=931701d0de0c4d05b0b34936203011&q=London";

    useEffect(() => {
        axios.get(url)
         .then(res => {
             console.log(res.json())
             setUpdates(res.data)
         })
         .catch(err => {
             console.log(err)
         })
    })
    return (
        <div>
            <DataContext.Provider value={{updates}}>
                {props.children}
            </DataContext.Provider>
        </div>
    )
}


export default DataContextProvider;

【问题讨论】：

您在控制台中得到了什么？可以加个截图吗？
检查更新是数组还是 json 对象。
@NadiaChibrikova 刚刚加了一个
所以它是一个具有 2 个字段而不是数组的单个对象。你不能迭代它。如果您希望它是一个数组，那么您的上下文有问题
我使用 ([ ]) 来设置期望数组的状态，而不是 ??期待一个对象。

标签： javascript reactjs api

【解决方案1】：

您只请求一个位置的数据，API 会返回一个对象，而不是数组。您可以更改您的组件以期望一个对象，或者更新上下文提供程序，因此它提供了一个数组。这看起来像：

const [updates, setUpdates] = useState([]);//note you want an array ([]) not an object ({})
 ...
let data = res.data
if(!data instanceof Array) data = [data] //put an object into array if needed
setUpdates(data)

更新

在您的回购中进行以下更改：

在DataContext中你需要将JSON响应解析成一个对象，所以替换

axios.get(url)
     .then(res => {
         setUpdates(res.data.current)
     })

与

axios.get(url)
     .then(res => res.json())
     .then(res => {
         setUpdates(res.current)
     })

这意味着您已经在提供程序中拥有current，并且在组件中您可以直接访问其字段，因此您需要替换

 <p>{updates.current}</p>

类似的东西

 <p>{updates.temp_c}</p>
 <p>{updates.humidity}</p>

【讨论】：

我的回购github.com/kelvinyelyen/weather.app
@KelvinYelyen 尝试关注更新部分
它给 res.json() 不是一个函数
是的，axios 为你做，忽略这一点，你的提供商已经很好了！
好吧，但它现在给出一个“未定义”

【解决方案2】：

不确定，但是您的 updates 是一个对象，这意味着您无法映射，或者在调用您的 API 时未定义，这就是它崩溃的原因。

如果你的 update 是一个对象，那么你可以这样做：map function for objects (instead of arrays)

如果在调用 API 时它的 undefined，那么您可以做一个简单的检查来查看它是否未定义，并且仅在未定义时映射。

【讨论】：

我期待的是一个数组而不是一个对象