TypeError：无法读取未定义的属性（读取“名字”）答案

【问题标题】：TypeError: Cannot read properties of undefined (reading 'firstname')TypeError：无法读取未定义的属性（读取“名字”）
【发布时间】：2022-01-22 08:43:31
【问题描述】：

我是新来的 react 和 node (express) 我正在尝试从数据库（'firstName'和'lastName'）中获取一些日期，将它们连接起来并显示在一个选择标签中。

这是我的工作：

我在节点文件中发送到数据库的请求：

app.get("/employeesName", (req, res) => {
  db.query("SELECT firstname , lastname FROM employees", (err, result) => {
    if (err) {
      console.log(err);
    } else {
      res.send(result);
    }
  });
});

react 中的 get 请求：

const [employeeList, setEmployeeList] = useState([]);
  useEffect(() => {
    const  getEmployeesNames = () => {
      Axios.get("http://localhost:3001/employeesName").then((response) => {
        setEmployeeList(response.data);
      });
      }; 
          getEmployeesNames();

  },[])

我尝试了类似的方法来在选择标签中输入我的数据：

 <select>
        <option value="">{employeeList[0].firstname+" "+employeeList[0].lastname}</option>
        <option value="">{employeeList[1].firstname+" "+employeeList[1].lastname}</option>         
 </select>

当我在 vs 代码中这样做时它可以工作，但是当我在浏览器中刷新我的页面时，我得到了那个错误（无法读取未定义的属性），我认为employeeList 在第一次渲染时是空的。这是合理的，因为我的初始状态是一个空数组（useState（[]）；），我试图初始化我的 useState 与 useState([{firstname: 'test', lastname: 'test2'}]); 类似，但仍然出现错误

应该怎么做才能避免这个错误？

【问题讨论】：

标签： node.js reactjs express

【解决方案1】：

useState([{firstname: 'test', lastname: 'test2'}])

这个数组只有一个元素，所以employeeList[1] 是假的

您可以有条件地呈现选择：

{
    employeeList.length > 0 && (
        <select>
            {
                employeeList.map((emp, index) => <option key={index} value={index}>{emp.firstname + " " + emp.lastname}</option>)
            }
        </select>)
}

【讨论】：