Question

React使用效应和USESESTATE对象未定义错误

2020-06-29

7903

javascript reactjs es6-promise use-effect use-state

在我的 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]));

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

它返回

TypeError: Cannot read property 'ClientDatabase' of undefined

这是 response.data 的控制台日志在此处输入图像描述

response.data 是一个数组。

Answer 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>

试试这个

Answer 2

编辑：

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

Pavlos Karalis

2020-06-29

Answer 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
}