为什么React不取消在我的模态表单输入的值?

Question

我使用的是Next和Tailwind/Daisy UI

下面页面的代码将从API端点获取一个JSON对象，并呈现源系统的上表和附加域的下表。单击顶级表中的一行，将第二个表筛选为相关域。这一切都很好。我也有一个模态，将用于创建新的源系统或编辑现有的。[Edit]和[Create]按钮调用相同的函数，但[Edit]按钮传递的是系统ID， [Create]按钮传递的是-1，这不是一个有效的系统ID。函数调用更新selectedsystemid存储，然后使用该存储过滤Domains表和模态的系统列表。

如果在加载页面时，单击[Create]，则模式打开并显示占位符(因为selectedSystemID为-1，因此不是有效的系统)。如果单击[Edit]按钮，则模式打开并显示系统名称(因为它已经从过滤器中找到了正确的系统)。如果现在再次单击[Create]按钮，尽管selectedSystemID为-1并且过滤器函数返回undefined，但模态输入字段仍然显示最后过滤的系统名称。我不完全理解为什么，我正在寻找为什么输入值不重新评估的解释以及如何修复它。我想我需要useRef或useEffect，但不确定在哪里或如何。非常感谢任何帮助。我已经用硬编码的JSON取代了API调用，这是响应的简化版本。

import { use, useEffect, useState } from "react";
import { listSourceSystems } from "./api/SourceSystems/index";
export default function Sourcesystem() {
const [systems, setSystems] = useState([]);
const [selectedSystemID, setSelectedSystemID]  = useState(-1)
const [modalIsOpen, setModalisOpen] = useState(false)

async function fetchData() {
const listSourceSystems = [
{
"id": 1,
"systemName": "Order Management",
"domains": [
{
"id": 1,
"domainName": "Customer"
},
{
"id": 2,
"domainName": "Order"
},
]
},
{
"id": 2,
"systemName": "Warehouse Managment",
"domains": [
{
"id": 9,
"domainName": "Product"
}
]
}
]
// setSystems(await listSourceSystems());
setSystems(listSourceSystems)
console.log(systems)
}
useEffect(() => {
fetchData();
}, []);
function filterDomains(systemID) {
setSelectedSystemID(systemID)
}
function selectedSystem (){
const ss = systems.filter(s=> s.id === selectedSystemID)[0]
return ss
}
function openModal(systemID){
filterDomains(systemID)
setModalisOpen(true)
console.log("openModal")
}
function closeModal(){
setModalisOpen(false)
console.log("closeModal")
}
return (
<>
<div className="flex flex-col mx-10 mt-4">
<h1 className="text-3xl font-bold underline text-center">Source Systems</h1>
<div className="divider"></div>
<div className="grid h-50 card bg-base-300 rounded-box place-items-center">
<table className="table table-compact w-full">
<thead>
<tr>
<th className="font-bold px-5">Name</th>
<th>actions</th>
</tr>
</thead>
<tbody>
{systems && systems.map((system) => (
<tr 
key={system.id} 
className={`hover ${system.id === selectedSystemID? "active text-secondary font-bold": ""}`}
onClick={() => filterDomains(system.id)}
>
<td className="px-5">{system.systemName}</td>
<td>
<button 
className="btn btn-primary btn-sm"
onClick={() => openModal(system.id)}
>
Edit
</button>
</td>
</tr>
))}
</tbody>
<tfoot>
<tr>
<td colSpan="4" className="text-center font-bold accent">Add a new Source System</td>
<td>
<button  
className="btn btn-primary btn-wide btn-sm"
onClick={()=> openModal(-1)}
>
click here
</button>
</td>
</tr>
</tfoot>
</table>
</div>
<div className="divider mt-0 before:bg-secondary after:bg-secondary"></div> 
<div>
<div className="grid h-20 card bg-primary-800 rounded-box place-items-center">
<table className="table table-compact w-full table-fixed table-zebra">
<thead>
<tr>
<th className="text-left px-5">Domain</th>
<th className="text-right px-5">Source System</th>
</tr>
</thead>
<tbody>
{ 
selectedSystem()?.domains.map(d => (
<tr key={d.id} className="hover">
<td className="px-5">{d.domainName}</td>
<td className="table-cell-2 text-right px-5">{systems.filter(s => s.id === selectedSystemID).systemName}</td>
</tr>
))
}
</tbody>
</table>
</div>
</div>
{/* !-- Modal --> */}
<input type="checkbox" id="source-system-modal" className=" modal-toggle" checked={modalIsOpen} />
<div className="modal">
<div className="modal-box">
<h3>Source System Maintenance</h3>
<form>
<input 
type="text" 
placeholder="System Name placeholder"
className="input input-bordered input-primary input-sm w-full"
value={selectedSystem()?.systemName }
>
</input>
</form>
<div className="modal-action">
<label htmlFor="source-system-modal" className="btn btn-info">Submit</label>
<label htmlFor="source-system-modal" className="btn btn-warning btn-outline" onClick={()=> closeModal()}>Cancel</label>
</div>
</div>
</div>
</div>
</>
)}

Answer 1

再一次，当我在Stack Overflow上发布它时，它将我引向不同的查询路径。原因其实很简单。输入中的值必须总是返回一个字符串所以我需要做一个三进制检查如果函数返回undefined则返回一个空字符串

value={selectedSystem()? selectedSystem().systemName : "" }