如何在 React js 中使用 json 数据类型的 map 方法显示单个数据答案

【问题标题】：How to display single data using map method for json datatype in React js如何在 React js 中使用 json 数据类型的 map 方法显示单个数据
【发布时间】：2020-09-23 22:09:23
【问题描述】：

const ProfileView = () => {

    useEffect(() => {
        axios.get('http://localhost:8080/customer/showData', {
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("token")
                }
            })
            .then((response) => {
                console.log(response);
                setData(response.data);
                setisLoaded(true);
            })
            .catch((error) => {
                console.log(error);
            });
    }, []);


    const [data, setData] = React.useState([]);
    const [isloaded, setisLoaded] = useState(false);
    let customer = null
    let view1 = null;
    let view2 = null;
    let view3 = null;
    let view4 = null;

    if (isloaded) {
        data.map(data1 => {
            customer = data1
            console.log(customer);
        })
    }

我收到类型错误 data.map 不是函数我正在尝试使用 map 方法获取 1 个用户数据我正在使用 get 方法获取资源

【问题讨论】：

你的 console.log(response) 产生了什么？

标签： json reactjs dictionary jsx

【解决方案1】：

这确实可以使用更多上下文。首先，data 没有被初始化。为此，请将一个参数传递给useState() 函数，一个空的[]。看看这是否足够，因为您不能在未定义的变量上调用.map()。

【讨论】：

【解决方案2】：

该错误意味着无论数据是什么，在其上调用.map 都不起作用。换句话说，这意味着.map方法在它上面不可用。如果你 console.log 它你会有未定义的，这是因为在第一次渲染时，直到你将 setData 设置为一个数组。

为了处理这个问题，React 为我们提供了一种使用默认值初始化数据的方法。在您的情况下，避免出现此错误可能会很方便

// we initialise data with an empty array so that it will not be equal to 
// undefined during the first render
const [data, setData] = React.useState([]);

在初始渲染期间，返回的状态（state）与作为第一个参数（initialState）传递的值相同。

来自：https://reactjs.org/docs/hooks-reference.html#usestate

另一种解决方案必须在 if 条件下隔离您的代码，如果数据存在，这意味着如果它不是未定义的，则执行此操作，但它会迫使您分散您的 dom 返回语句。（但这并不意味着它是错误的）

PS：另外，请确保调用 setData，因为我没有看到调用 setData，所以您似乎给了我们一个不完整的代码。

【讨论】：

即使在传递参数后我仍然收到错误我正在使用 fetch 从数据数据库中获取数据
那么请用更多代码完成您的帖子。向我们展示如何获取数据。

【解决方案3】：

我相信您的问题可能是您从服务器返回的响应不是数组，因此没有 .map 方法。打电话时检查一下

setData(response.data);

response.data 实际上是一个数组，而不是字符串或对象。如果响应设置了 content-type:application/json 标头，axios 只会解析 json。

【讨论】：