[英]How to handle unknown number of state variables in React.js?
我正在從服務器獲取數據。 我不知道api到底有多少項,所以我在html中使用了map的方法,下面是返回部分。
if (loading) {
return (
<div>
<div>
<Header />
<Sidebar />
</div>
<h1>LOADING ...</h1>
</div>
);
}
if (error) console.log(error);
return (
<div>
<div>
<Header />
<Sidebar />
<h1>Menu Edit Page</h1>
{edit === false ? (
<div>
<table>
<tbody>
{
data?.map((item, index) => (
<tr>
<td>Name: </td>
<td>{item?.name}</td>
{/* Full_Name: { item.name },
User_Email: { item.email } */}
</tr>
))
}
</tbody>
</table>
<Button onClick={() => editMenu()}>edit</Button>
</div>
) : (
<div>
<table>
<tbody>
{
data?.map((item, index) => (
<tr>
<td>Name: </td>
<input
type="text"
required="required"
placeholder="Edit menu item"
name="age"
defaultValue={item?.name}
onChange={() => itemChange(item?.class, item?.id)}
>
</input>
{/* {item?.name} */}
{/* Full_Name: { item.name },
User_Email: { item.email } */}
</tr>
))
}
</tbody>
</table>
<Button onClick={() => saveMenu()}>save</Button>
</div>
)}
</div>
</div>
)
當我為對象使用輸入標簽時,我需要在單擊按鈕時操作它們。 但是,我不知道有多少個對象,所以我不能使用 state 個變量。 此外,當我更改 object 時,我需要從 object 本身了解信息。整個代碼如下。
import React, { useState } from 'react'
import Header from "../Components/common/header/header";
import Sidebar from "../Components/common/sidebar/Sidebar";/// IGNORE THIS PAGE
import useFetch from './useFetch';
import { Button } from 'antd';
function MenuEditer() {
const [newItem, setNewItem] = useState("")
const [edit, setEdit] = useState(false);
const [buttonPressed, setButtonPressed] = useState(false);
const { data, loading, error } = useFetch("http://localhost:3001/category/deneme");
const itemChange = async (clss, id) => {
alert("beginning of the func");
// while(!buttonPressed);
// alert("button pressed");
// if(clss === "category"){
// }
// if(clss === "item"){
// }
}
const saveMenu = async () => {
setButtonPressed(true);
setEdit(false);
}
const editMenu = async () => {
setEdit(true);
}
if (loading) {
return (
<div>
<div>
<Header />
<Sidebar />
</div>
<h1>LOADING ...</h1>
</div>
);
}
if (error) console.log(error);
return (
<div>
<div>
<Header />
<Sidebar />
<h1>Menu Edit Page</h1>
{edit === false ? (
<div>
<table>
<tbody>
{
data?.map((item, index) => (
<tr>
<td>Name: </td>
<td>{item?.name}</td>
{/* Full_Name: { item.name },
User_Email: { item.email } */}
</tr>
))
}
</tbody>
</table>
<Button onClick={() => editMenu()}>edit</Button>
</div>
) : (
<div>
<table>
<tbody>
{
data?.map((item, index) => (
<tr>
<td>Name: </td>
<input
type="text"
required="required"
placeholder="Edit menu item"
name="age"
defaultValue={item?.name}
onChange={() => itemChange(item?.class, item?.id)}
>
</input>
{/* {item?.name} */}
{/* Full_Name: { item.name },
User_Email: { item.email } */}
</tr>
))
}
</tbody>
</table>
<Button onClick={() => saveMenu()}>save</Button>
</div>
)}
</div>
</div>
)
}
export default MenuEditer;
如何從數組中到達 object 本身,或者在不知道數據長度的情況下使用 useState hook? 或者,我可以在 onClick 屬性中寫 function 的語句嗎? 或者,我可以使用其他任何輸入表單來專門到達 object 和更新的字符串嗎? 這個問題可能不清楚,但我將不勝感激任何想法。 謝謝!
您可以使用 object 來處理輸入數據
首先使用useEffect
設置 state 的初始值
請注意,確保 HTML 輸入的屬性name
與來自 API 的屬性名稱相同
const [formData, setFormData] = useState({})
useEffect(() => {
const copy = formData
data.forEach((item,index)=> {
copy["item" + index] = {name: item.name, email: item.email}
setFormData(copy)
})
}, [])
然后允許事件處理程序自動處理更改
const itemChange = (event, index) {
const copy = formData
const changedItem = copy["item" + index]
changedItem[event.target.name] = event.target.value
setFormData(copy)
}
在輸入元素中
<input
type="text"
required={true}
placeholder="Edit menu item"
name="age" // make sure the name is same as the property name that comes form the api
value={formData["item" + index].age}
onChange={(e) => itemChange(e, index)}
/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.