可以访问数组的特定位置，但无法访问此数组中的特定对象

Question

我遇到了一个问题，正如标题本身所说的那样。

我可以访问数组的特定位置，但无法访问此数组中的特定对象。

export const getAccessLevel = id =>{      

    const accessLevels = [

        {id: 0, name: 'Admin'},

        {id: 1, name: 'Customer'},

        {id: 2, name: 'Client'},

        {id: 3, name: 'Viewer'}

    ]

    let index = accessLevels.findIndex(array => array.id === id);

    console.log(index) // result : 3

    console.log(accessLevels[index]) 

    // this is returning {id: 3, name: "Viewer"}

    let AccessLevelName = accessLevels[index].name

    // this is return error : Cannot read property 'name' of undefined

    return AccessLevelName

}

Answer 1

在这个例子中，似乎正在工作，但我建议你使用.find（），这样你就可以在一次调用中拥有对象，而不是从索引中获取它。就像const getAccessLevel = id => {    const accessLevels = [      { id: 0, name: "Admin" },      { id: 1, name: "Customer" },      { id: 2, name: "Client" },      { id: 3, name: "Viewer" }    ];    let accessLevel = accessLevels.find(array => array.id === id);    console.log(accessLevel);    let AccessLevelName = accessLevel.name;    return AccessLevelName;  };

Answer 2

我发现了问题！这是因为反应渲染顺序而发生...因为第一次调用此函数 id 时未定义。它在这里得到了错误：let AccessLevelName = accessLevels[index].name我所做的修复是使用Effect钩子。当操作（redux）函数更改具有id值的数据值时，它会再次执行getAccessLevel，但定义了id！获取访问级别 ：export const getAccessLevel = id => {    console.log(id)    const accessLevels = [        { id: 0, name: "Admin" },        { id: 1, name: "Customer" },        { id: 2, name: "Client" },        { id: 3, name: "Viewer" }    ];    let accessLevel = accessLevels.find(array => array.id === id);    console.log(accessLevel);    let AccessLevelName = ''    if (id) {        AccessLevelName = accessLevel.name    }    return AccessLevelName;}用途效果 ： useEffect(() => {        props.findGroup(id)    }, [])    const handleAccessLevel = () =>{        setAccessLevelName(getAccessLevel(props.data.accessLevel))    }    useEffect(() => {        handleAccessLevel()      }, [props.data])