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

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