Question

在我的ClientData.js中

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

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

我认为问题可能在于该对象由于等待API响应而未定义。

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

=SUMPRODUCT(--(COUNTIF(J2:J4,H2:H10)=0))

当我尝试访问对象时，它可以使用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(); }, [])

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

它返回

TypeError：无法读取未定义的属性'ClientDatabase'

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

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])

Answer 3

问题在于记录数据时。您要提前记录一下。

因此，要检查修改后的状态，可以使用附加的useEffect(() => { if(objTest.length > 0) { console.log(objTest[0].ClientDatabase) } }, [objTest])钩子。

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

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

workbench.action.selectTheme

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

3 个答案: