时间戳

首页 > 解决方案 > REACT JS中的Array.find函数无法读取未定义的属性

reactjs - REACT JS中的Array.find函数无法读取未定义的属性

问题描述

我是 REACT 新手并尝试使用 array.find 函数。出现错误无法读取first_name未定义的属性。RenderIt当我在函数内声明 JSON 数组时。不确定，为什么REACT看不到结果数组。

export default function App() {

  const [results, SetResults] = useState([])
  useEffect(() => {
    const JSON = [{
        EMPLID: '345386',
        first_name: 'David',
      },
      {
        EMPLID: '345397',
        first_name: 'Luca',
      },
    ]
    SetfName(JSON[0].first_name)
    SetResults(JSON)
  }, [])

  const RenderIt = () => {
    let found = results.find(element => element.EMPLID === '345397')
    return ( < div > {
        found.first_name
      } < /div>)
    }

    return ( <
      div className = "App" >
      <
      h1 > First Name < /h1> <
      h2 > {
        (RenderIt())
      } < /h2>       <
      /div>
    );
  }

标签： reactjs

解决方案

提供的函数useEffect仅在第一次渲染后运行，因此在第一次渲染期间，results是[]，所以find找不到任何东西并返回undefined，这反过来意味着found是undefined，因此没有first_name属性，这是你的错误正在看。

你想检查是否results有任何东西，如果有的话，唯一可以选择渲染的RenderIt东西。

把它放在你的底部h2：

{ results !== [] && RenderIt() }

或者您可以将 RenderIt 更改为：

const RenderIt = () => {
    let found = results.find(element => element.EMPLID === '345397')
    if (!found) return '';
    return (<div> {found.first_name} </div>)
}

推荐阅读