javascript - 在 ReactJS 中映射对象数组的问题

Question

我有一个对象数组，我正在尝试按类型对对象进行分组，如下所示:

const el = {
    Type1: [
        {
            param1: 1,
            param2: value1,
            position: 1,
            type: 'Type1'
        }, {
            param1: 2,
            param2: value2,
            position: 2,
            type: 'Type1'
        }
    ],
    Type2: [
        {
            param1: 3,
            param2: value3,
            position: 1,
            type: 'Type2'
        }, {
            param1: 4,
            param2: value4,
            position: 2,
            type: 'Type2'
        }, {
            param1: 5,
            param2: value5,
            position: 3,
            type: 'Type2'
        }
    ]
}

Type 属性中的对象表示单选按钮的选择。这样我设置了默认选中的第一个选项:

    const groupBy = (array, key) => {
        return array.filter(o => o.checked != undefined).reduce((result, currentValue) => {
            (result[currentValue[key]] = result[currentValue[key]] || []).push(
                    currentValue);
            return result;
        }, {});
    };

const [state, setState] = useState({
        buttonsTypes: groupBy([...arrayObjects, arrayObjects.map((item, index) => item.position === 1 ? item['checked'] = true : item['checked'] = false)], 'type'),
        selections: arrayObjects.filter(item => item.checked)
    });

我的问题是如何动态映射它并更改点击时选中的值？到目前为止我试过这个:

    const selectChoice = (obj) => {
        setState(prevState => {
            return {
                buttonsTypes: ... // Not sure how to update the checked value only for the selection of the specific obj.Type
                selections: ...
            };
        });
    };

{Object.entries(state.buttonsTypes).map((item, index) => {
                                return <React.Fragment>
                                    <div className="some-class"/>
                                    <span id="text">{item[0]}</span>
                                    <div id="radio-button-wrapper">
                                        {item[1].map((choice, index) => {
                                                                        return <label className="label-css">
                                                                            <input type="radio" name={choice.param2} value={choice.param1} checked={choice.checked} onClick={() => selectChoice(choice)}/>
                                                                        </label>
                                                                    })
                                        }
                                    </div>
                                </React.Fragment>
                            })
                        }

任何人都可以建议一些示例或其他方法来解决这个问题吗？

更新:正如答案中所建议的那样，我通过为每个 radio 组仅保留一组选定选项来解决此问题:

const selectChoice = (obj) => {
        setState(prevState => {
            const sel = prevState.selections;
            const idx = sel.findIndex(item => item.type === obj.type);

            if (idx === -1) {
                sel.push(obj);
            } else {
                sel[idx] = obj;
            }

            return {
                ...prevState,
                selections: sel
            };
        });
    };

映射内部:

{Object.entries(state.groupedArray).map((item, index) => {
                                return <React.Fragment>
                                    <div className="some-class"/>
                                    <span id="text">{item[0]}</span>
                                    <div id="radio-button-wrapper">
                                        {item[1].map((choice, index) => {
                                                                        return <label className="label-css">
                                                                            <input type="radio" name={choice.param2} value={choice.param1} defaultChecked={choice.position === 1} onClick={() => selectChoice(choice)}/>
                                                                        </label>
                                                                    })
                                        }
                                    </div>
                                </React.Fragment>
                            })
                        }

如果有人对改进有任何建议或意见，我们将不胜感激。

Answer 1

为什么不使用“状态”来跟踪选中的单选按钮的索引？

然后在 {item[1].map((choice, index) => {...}} 中

您可以检查当前保存的“状态”是否与您尝试返回的输入中的当前索引匹配

并通过附加您的 selectChoice 处理程序来更新当前选中的 radio 输入的索引