我是 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);
}
});
});
反應中的獲取請求：
const [employeeList, setEmployeeList] = useState([]);
useEffect(() => {
const getEmployeesNames = () => {
Axios.get("http://localhost:3001/employeesName").then((response) => {
setEmployeeList(response.data);
});
};
getEmployeesNames();
},[])
我嘗試了類似的方法來在 select 標簽中顯示我的資料：
<select>
<option value="">{employeeList[0].firstname " " employeeList[0].lastname}</option>
<option value="">{employeeList[1].firstname " " employeeList[1].lastname}</option>
</select>
當我在 vs 代碼中這樣做時它有效，但是當我重繪 頁面時在瀏覽器中我收到該錯誤（無法讀取未定義的屬性），我認為員工串列在第一次渲染時為空。這是合理的，因為我的初始狀態是一個空陣列 (useState([]);)，我試圖用類似的東西初始化我的 useStateuseState([{firstname: 'test', lastname: 'test2'}]);但仍然得到錯誤
應該怎么做才能避免這個錯誤？
uj5u.com熱心網友回復：
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>)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/388143.html