React重新填充现有的检查输入字段

Question

我在React.js中创建了一个自定义的工作日检查输入字段，其目的是向客户显示哪些天是开放的。我循环通过一个硬编码数组来呈现每一天，在第一行显示星期一到星期四，在第二行显示星期五到星期日。日期存储在数组storeDays中。

const [storeDays, setStoreDays] = useState([]);

<div className="first-row-days">
{["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY"].map(
(value, index) => (
<React.Fragment key={"iterate-1-" + index}>
<input
type="checkbox"
value={value}
key={"first-row-days-" + index}

onChange={(e) => setStoresDays(e)}
/>
<label>
{value}
</label>
</React.Fragment>
)
)}
</div>
<br />
<div className="second-row-days">
{["FRIDAY", "SATURDAY", "SUNDAY"].map((value, index) => (
<React.Fragment key={"iterate-2-" + index}>
<input
type="checkbox"
value={value}
key={"second-row-days-" + index}

onChange={(e) => setStoresDays(e)}
/>
<label>
{value}
</label>
</React.Fragment>
))}
</div>

我在添加和编辑页面上表示此代码。它在添加新数据时工作良好，但在用户编辑现有日期的数据时出现问题。用户没有已检查的天数信息。

如何从服务器storeTime的响应对象中重新填充现有的已检查数据?编辑日页面上的日子?我已经试着把这个商店放好了。days[index]直接在value属性中，但我没有得到预期的结果。

示例响应服务器['SATURDAY', 'SUNDAY']的保存天数数据

codesandbox

Answer 1

你必须做两个改变:

1. 您的服务器响应数组需要大写，就像正在映射的数据一样。

2. 将以下道具添加到您的复选框输入中:

   检查= {responseDataFromServer.includes(值)}