status每當我在特定索引處輸入新資料時，以下 JSON 資料的屬性將不會顯示在表中。看起來，我的代碼只顯示status最初在 JSON 中的資料的屬性，而不是添加的資料的屬性。下面發布的是 JSON 和 add_data、add_button 和 table 組件的代碼。
JSON（出于顯而易見的原因，我將 JSON 保持簡短，但每個grievance和services鍵中的其他屬性是serial_number, name, date, issue, 和status您將在下表中看到的）
[
{
"district": "Kolkata",
"ward_no": [
{
"ward": "6",
"grievance": [
{"status": "open"}
],
"services": [
{"status": "pending"}
]
},
{
"ward": "7",
"grievance": [
{"status": "open"}
],
"services": [
{"status": "closed"}
]
},
{
"ward": "9",
"grievance": [
{"status": "open"}
],
"services": [
{"status": "pending"}
]
}
]
},
{
"district": "Hooghly",
"ward_no": [
{
"ward": "10",
"grievance": [
{"status": "pending"}
],
"services": [
{"status": "pending"}
]
},
{
"ward": "11",
"grievance": [
{"status": "open"}
],
"services": [
{"status": "closed"}
]
},
{
"ward": "12",
"grievance": [
{"status": "pending"}
],
"services": [
{"status": "open"}
]
}
]
}
]
add_data.jsx（這是獲取輸入的表單。同樣，為了避免這個問題變得太長，我只顯示了獲取狀態輸入的代碼。只是補充一下，狀態是從下拉串列中選擇的。）
const AddDataScreen = () => {
const [openState, setOpenState] = useState(false);
const [stateDropdown, setStateDropdown] = useState('');
const onStatusSelectValue = (value) => {
setStateDropdown(value);
setOpenState(!openState);
}
return (
<div>
<div>
<label>Status</label>
<div className="blockStatusDrop">
<div className="statusSelectDropdown">
<div className="statusSearchBox">
{!stateDropdown ? "Set Status" : stateDropdown}
</div>
<div className="searchStatusIcon" onClick={() => setOpenState(prev => !prev)}>
{openState ? <GoTriangleUp size={"22px"} /> : <IoMdArrowDropdown size={"30px"} />}
</div>
</div>
<div className={openState ? "statusSelectedOption" : "statusOption"}>
<div onClick={() => onStatusSelectValue("open")}>Open</div>
<div onClick={() => onStatusSelectValue("pending")}>Pending</div>
<div onClick={() => onStatusSelectValue("closed")}>Closed</div>
</div>
</div>
</div>
<div className="buttonContainer">
<div className="submitButton">
<AddButton state={stateDropdown} id={`00${serviceRequestNumber.length 1}`} type={typeDropDown} district={districtDropdown} ward={wardDropdown} name={name} issue={issue} description={description} ></AddButton>
</div>
<div className="resetButton" onClick={resetForm}>Reset</div>
</div>
</div>
);
}
export default AddDataScreen;
add_button.jsx（這是Add按鈕組件便于資料的插入在特定索引。道具命名district，ward并type從所述AddDataScreen組分被用于找到在該資料是要插入的索引。請注意，props.state是state值令人驚訝的是，當我使用 console.log(props.state) 檢查該值是否是從前一個組件中選擇時，它確實從下拉串列中顯示了所選選項，其螢屏截圖如下所示）
const AddButton = (props) => {
const query = { //The query parameters
district: props.district,
ward: props.ward,
category: props.type
}
console.log(props.state)
const insertData = {
serial_number: props.id,
name: props.name,
date: new Date().toISOString(),
issue: props.issue,
description: props.description.split(/[,.]/),
state: props.state
};
//This is where the filtering happens to find the index
const districtData = dummyData.find(value => value.district === query.district);
const submitData = () => {
//This is where the data is getting pushed
if (districtData) {
const wardData = districtData.ward_no.find(value => value.ward === query.ward);
if (wardData) {
wardData[query.category.toLowerCase()].push(insertData);
}
}
console.log(dummyData);
}
return (
<div className="submitAddButton" onClick={submitData}>Submit</div>
);
}
export default AddButton;
在此螢屏截圖中，您可以看到新資料的狀態（即 Bruno Fernandes）確實有一個值，表示已打開，這正是所選擇的。
現在終于，當談到在表格上顯示這些資料時，這就是結果。狀態不顯示。
表.jsx
const Table = (props) => {
const data = [];
const history = useHistory();
const [tableData, setTableData] = useState(data)
useEffect(() => {
setTableData(props.buttonValue)
}, [props.buttonValue]);
const tableDataPage = () => {
history.push("/tableData")
};
return (
<div className="tableDataList">
{!tableData ? "" : <table className="serviceRequestList">
<tbody>
<tr>
<th style={{ width: "5%" }}>Serial Number<span><ImFilter size={"12px"} /></span></th>
<th>Name<span><ImFilter size={"12px"} /></span></th>
<th>Date<span><ImFilter size={"12px"} /></span></th>
<th>Issue<span><ImFilter size={"12px"} /></span></th>
<th>Status<span><ImFilter size={"12px"} /></span></th>
</tr>
{tableData.map((value, key) => (
<tr key={key} onClick={tableDataPage}>
<td>{value.serial_number}</td>
<td>{value.name}</td>
<td>{value.date}</td>
<td>{value.issue}</td>
<td>{value.status}</td>
</tr>
))}
</tbody>
</table>}
</div>
);
}
export default Table;
uj5u.com熱心網友回復：
添加按鈕
根據您的螢屏截圖，您的 dummyData 應該將鍵作為狀態，但在您的 insertData 中，您使用的是狀態鍵。問題可能與密鑰不匹配有關。
const insertData = {
serial_number: props.id,
name: props.name,
date: new Date().toISOString(),
issue: props.issue,
description: props.description.split(/[,.]/),
status: props.state
};轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/368196.html
標籤：javascript 反应 反应钩子