reactjs - 两种方式的数据绑定(bind)不适用于 React 中动态加载的多个复选框

Question

我在管理 React 数据集中动态加载的复选框时遇到问题。(我仅使用带有功能组件的 React 和带有 Reactstrap 库的钩子(Hook))这是数据集:

[
    {
       "expertiseAreaId": 1,
       "descriptionEng": "Analysis and Mapping",
       "descriptionFra": "Analyse et cartographie",
       "checked": false
    },
            {
       "expertiseAreaId": 1,
       "descriptionEng": "Strategic planning",
       "descriptionFra": "Planification stratégique",
       "checked": false
    },
            {
       "expertiseAreaId": 1,
       "descriptionEng": "Project/Proposal Design",
       "descriptionFra": "Projet/Proposition de projet",
       "checked": false
    },
    ....
]

数据集包含在expertiseAreasData内。我使用另一个状态变量 (expertiseAreaIds) 来存储将在复选框的选中属性中读取的 bool 值 (Input type="checkbox")

    const [expertiseAreaIds, setExpertiseAreaIds] = useState([false, false, false, false, false, false, false, false, false, false, false, false, false, false]);
    const [expertiseAreasData, setExpertiseAreasData] = useState([]);

这是 JSX:

                    <br /><Label>Area of Expertise <span style={{ color: "red" }}>*</span></Label>
                <FormGroup row className="my-0" style={{ paddingLeft: "20px" }}>
                    <Col xs="12" sm="10" lg="10">

                        {expertiseAreasData.length > 0 ? expertiseAreasData.map((data, idx) => (<Fragment key={data.expertiseAreaId}><FormGroup check inline style={{ marginTop: "8px" }}>
                            <Input  className="form-check-input" type="checkbox" checked={expertiseAreaIds[idx]} onChange={() => onChangeExpertiseAreas(idx)} />
                            {language.toUpperCase() === "EN" && <Label className="form-check-label" check >{data.descriptionEng}</Label>}
                            {language.toUpperCase() === "FR" && <Label className="form-check-label" check >{data.descriptionFra}</Label>}
                        </FormGroup><br /></Fragment>)) : <span>No data loaded.</span>
                        }
                    </Col>
                </FormGroup><br />

当我调用 onChangeExpertiseAreas 事件时，我会更新专业知识区域 ID 和专业知识区域数据

    const onChangeExpertiseAreas = (idx) => {
        var data = expertiseAreaIds;
        var value = data[idx];

        data[idx] = !value;
        setExpertiseAreaIds(data);

        var dt = expertiseAreasData;
        var element = dt[idx];
        element.checked = !value;
        dt[idx] = element;

        setExpertiseAreasData([]);
        setExpertiseAreasData(dt);
}

当我选中复选框时，状态会正确更新，但 JSX 不会更新，并且我始终将复选框显示为 false(初始状态)。我希望其他人也遇到过我同样的问题

Answer 1

您正在改变导致此问题的数据/状态。您始终需要为状态值分配新的引用才能触发重新渲染。

这样做

const onChangeExpertiseAreas = (idx) => {
    var data = [...expertiseAreaIds]; // make a copy of array, change the reference
    var value = data[idx];

    data[idx] = !value;
    setExpertiseAreaIds(data);