反应 UseEffect 和 UseState 对象未定义错误答案

【问题标题】：React UseEffect and UseState object undefined error反应 UseEffect 和 UseState 对象未定义错误
【发布时间】：2020-10-19 22:12:03
【问题描述】：

在我的 ClientData.js 中

我正在使用 useEffect 调用 API（正在运行），然后使用 useState 将 API response.data 设置为变量（正在运行）。

response.data 是一个对象数组，然后我将其设置为等于局部变量。但是当我尝试访问对象参数时，我得到一个对象未定义错误。

我认为问题可能是对象未定义，因为它正在等待 API 响应。

这是来自 API 的对象的样子：

objTest={
  ClientDatabase: "21",
  ClientID: "21",
  ClientName: "21",
  ClientServer: "21",
  Country: "US - 21",
  DatabaseVersion: "21",
  Namespace: "21",
};

function SimpleSelect() {
    const classes = useStyles();
    

    const [objTest, setobjTest] = useState([]);

    const clientAPI =  useCallback( async() => {
       
      //returns an array of objects
           await axios({
            method:'get',
             url,
            auth: {
                username: user,
                password: pass
            }
        })
        .then(function(response) {
  
         
            setobjTest(  response.data)
    
      
  
      
        })
        .catch(function (error){
            console.log(error);
        });

    })
    useEffect( () => {
        clientAPI();
        

        
    }, [])

当我尝试访问对象时，它使用 console.log((objTest[0]));

但是当我尝试访问 objects 参数时像这样：console.log((objTest[0].ClientDatabase));

TypeError: 无法读取未定义的属性“ClientDatabase”

这是 response.data 的控制台日志 enter image description here

response.data 是一个数组。

【问题讨论】：

当我使用类而不是函数并使用 CompetentDidMount 而不是 useEffect 时，此语法工作正常
您是否检查过以确保 data.response 确实是一个数组？
@RameshReddy 我 console.log(objTest[0].ClientDatabase) 在 useEffect 语句下面 10 行。 objTest[0].ClientDatabase 的语法返回未定义的错误。
@RameshReddy 当我执行 objTest[0] 时，它会工作并返回对象。
您是否将其记录在具有 [objTest] 依赖项的 useEffect 中？

标签： javascript reactjs es6-promise use-effect use-state

【解决方案1】：

你把初始状态作为一个空数组。这就是为什么你不能访问它的第一个元素。您可以像这样将非空数组设置为初始状态

const obj=[{
  ClientDatabase: "21",
  ClientID: "21",
  ClientName: "21",
  ClientServer: "21",
  Country: "US - 21",
  DatabaseVersion: "21",
  Namespace: "21",
}];

const [objTest, setobjTest] = useState(obj);

或者你可以检查数组是否为空

objTest.length && console.log(objTest[0].ClientDatabase)

api 调用将需要一些时间来获取数据。初始状态是给你错误的原因

<Select labelId="demo-simple-select-label" id="demo-simple-select" value={age} onChange={handleChange} > {objTest.length && objTest.map(myList => { return( <MenuItem key = {myList.ClientDatabase} value = {myList} > {myList.ClientName} + {myList.Site} </MenuItem> ) })} </Select>

试试这个

【讨论】：

初始状态是一个数组，代码片段就是对象的样子。 const [objTest, setobjTest] = useState([]);
@JavascriptDeveloperMaintwo - 从response.data 得到什么？是数组吗？
好的，那么您所要做的就是使用objTest.length && objTest[0].ClientDatabase。数组一开始是空的。加载数据需要一些时间。或者你可以设置一个非空数组作为初始值
@TheAlpha93 这行得通，但问题是我试图映射 objTest 以进行材料 ui 元素选择，这不起作用：

【解决方案2】：

编辑：

useEffect( () => console.log(objTest[0].ClientDatabase), [objTest])

【讨论】：

在他的情况下覆盖数组有什么问题？他有一个空数组，并在得到响应后尝试填充它。
啊我没看到他说data.response是一个数组
@PavlosKaralis 我添加了一张 console.log(response.data) 的图片，我相信它表明它是一个数组
@RameshReddy 我添加了一张 console.log(response.data) 的图片，我相信它表明它是一个数组

【解决方案3】：

问题在于您记录数据的时间。你记录的有点早了。

所以要检查修改后的状态，您可以使用额外的useEffect 钩子。

useEffect(() => {
  if(objTest.length > 0) {
    console.log(objTest[0].ClientDatabase)
  }
}, [objTest])

当你想在 JSX 中使用它时，你可以检查它是否被填充：

{
    clientArrTwo.length > 0 ? <Select labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={age}
        onChange={handleChange} >
        {clientArrTwo.map(myList => {
            return (<MenuItem key={myList.ClientDatabase} value={myList} > {myList.ClientName} + {myList.Site} </MenuItem>)

        })}
    </Select> : null
}

【讨论】：