为什么使用提供的React-hook从API提取数据不一致？

如何解决为什么使用提供的React-hook从API提取数据不一致？

我正在尝试使用React-hook渲染一些名称字符串。数据是从控制器文件中定义的'/ api / getMoreCards'端点获取的，可以正常工作。

问题是当我将获取的数据存储到react-hook的useState对象的“数据”中时，它不一致地提供了对数据的访问。让我更具体一点：

import React,{useState,useEffect} from 'react';
import axios from 'axios';
const regeneratorRuntime = require("regenerator-runtime");

const HS = () => {
  const getData = async() => {
    const data = await axios.get('/api/getMoreCards')
    console.log(data)
    setData(data)
}
  const [data,setData] = useState({});
    useEffect(()=>{
      getData()
    },[]);

    return (
      <div>
        <h1>List of Cards</h1>
        **<div>{data.data[0].name}</div>**
      </div>
    );
}
export default HS;

此文件已导出到App.js。

在上面的代码中，data.data[0].name有时会在本地主机上正确呈现，但是在大多数情况下，它给我以下错误：

“未捕获的TypeError：无法读取未定义的属性'0' 在控制台（HS（hsContainer.js：76）中”。

在这种情况下，登录到第7行的控制台根本不会出现在控制台中。

我尝试关闭并重新打开VScode，将文件更改为“ jsx”，将data.data[0].name声明为常量，更改getData和useState代码的顺序，所有这些仍然不一致。

这是我的webpack.config.js和package.json文件供参考：

Webpack.config.js

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
  entry: [
    'react-hot-loader/patch','./src/index.js'
  ],output: {
    path: path.resolve(__dirname,'dist'),filename: 'bundle.js'
  },mode: process.env.NODE_ENV,module: {
    rules: [
      {
        test: /\.(js|jsx)$/,use: 'babel-loader',exclude: /node_modules/
      },{
        test: /\.css$/,use: [
          'style-loader','css-loader'
        ]
      },{
        test: /\.svg$/,use: 'file-loader'
      },{
        test: /\.png$/,use: [
          {
            loader: 'url-loader',options: {
              mimetype: 'image/png'
            }
          }
        ]
      }
    ]
  },resolve: {
    extensions: [
      '.js','.jsx'
    ],alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },devServer: {
        contentBase: './dist',proxy: {
            '/api': 'http://localhost:3000','/api/profile': 'http://localhost:3000',},historyApiFallback: true,plugins: [
    new HtmlWebpackPlugin({
        template: `./public/index.html`,}),],};

module.exports = config;

package.json

{
  "name": "Solo-Project","version": "1.0.0","description": "","main": "webpack.config.js","scripts": {
    "test": "echo \"Error: no test specified\" && exit 1","start": "node ./server/server.js","build": "cross-env NODE_ENV=production webpack","devother": "cross-env NODE_ENV=development webpack-dev-server --open --hot & nodemon ./server/server.js","dev": "concurrently \"cross-env NODE_ENV=development webpack-dev-server --open --hot --inline --progress --colors --watch --content-base ./\" \"nodemon ./server/server.js\""
  },"repository": {
    "type": "git","url": "git+https://I have replaced this for privacy on stackoverflow.git"
  },"keywords": [],"author": "","license": "ISC","bugs": {
    "url": "https://I have replaced this for privacy on stackoverflow"
  },"homepage": "https://I have replaced this for privacy on stackoverflow","devDependencies": {
    "@babel/core": "^7.11.6","@babel/preset-env": "^7.11.5","@babel/preset-react": "^7.10.4","@hot-loader/react-dom": "^16.13.0","babel-loader": "^8.1.0","css-loader": "^4.3.0","file-loader": "^6.1.0","html-webpack-plugin": "^4.4.1","style-loader": "^1.2.1","url-loader": "^4.1.0","webpack": "^4.44.1","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0"
  },"dependencies": {
    "axios": "^0.20.0","concurrently": "^5.3.0","cross-env": "^7.0.2","express": "^4.17.1","nodemon": "^2.0.4","react": "^16.13.1","react-dom": "^16.13.1","react-hot-loader": "^4.12.21"
  }
}

解决方法

每当您访问数据时，数据中都没有任何内容。要么使用包含元素的数组对其进行初始化，要么在呈现之前检查该数组是否为空。

const [data,setData] = useState({
    data: [{
        name: "tmp"
    }]
});

// or with optional chaining

return (
    <div> <h1>List of Cards</h1>
       {data?.data?.length && (
            <div>{data.data[0].name}</div>
       )}
    </div>
);

,

您还可以在渲染之前先检查“数据”是否有效

<div>{data && data.data[0].name}</div>