类型错误：无法读取未定义的属性(读取"名字")

Question

我是反应和节点(express(的新手我正试图从数据库中获取一些日期("firstName"one_answers"lastName"(，将它们连接并显示在select标记中。

我就是这么做的：

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

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'}]);的东西，但仍然得到错误

应该做些什么来避免这个错误？

Answer 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>)
}

Answer 2

我使用中间件解决了这个问题。

npm i body-parser

const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json({ extended: false }));

我希望你会觉得它很有用。

Answer 3

假设您的状态为，

const [employeeList, setEmployeeList] = useState([]);

渲染选项应使用map。下面是一个例子。

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

您还应该像对对象使用emp?.firstname一样使用?。如果emp对象上不存在firstname属性，则可以防止出现错误。