javascript - 将函数转换为动态 selectBoxes，它可以工作一次、两次或从不工作。反应

Question

我有一个带有动态选择框的表单。根据第一个结果，我调用一个函数，其结果将进入第二个 selectBox。

我找到了解决方案：

显然 onClick 不适用于选项标签，所以我将我的功能放在选择标签的 onChange 中。或者我使用 useEffect 在变量更改时调用该函数。

上述这些解决方案有效，但我的问题是它工作一次，有时两次但不会更多。我必须重新加载页面，但它不适用于所有这些。

如果有人想深入研究我的代码并告诉我为什么它每次都不起作用。

谢谢你。

变量 componentOriginName、componentTargetName 和函数 getComponentOriginNames、getComponentTargetNames 来自 redux。

    const [relationType, setRelationType] = useState({
        type: props.type,
    });

    const [newRelation, setNewRelation] = useState({
        componentOriginType: "",
        componentOriginName: "",
        componentTargetType: "",
        componentTargetName: "",
        data: "",
    });

表格 ：

<div className='container--info--tuple'>
                    <div className='group--input'>
                        <select
                            name='componentOriginType'
                            onChange={handleChange}
                            value={newRelation.componentOriginType}
                            required>
                            <option value=''></option>
                            {props.components &&
                                props.components.map((component, i) => {
                                    return (
                                        <option key={i} value={component.name}>
                                            {component.name}
                                        </option>
                                    );
                                })}
                        </select>
                        <span className='floating--label--select required'>
                            Composant origine
                        </span>
                    </div>
                    <div className='group--input'>
                        <select
                            name='componentOriginName'
                            onChange={handleChange}
                            value={newRelation.componentOriginName}
                            required>
                            <option value=''></option>
                            {props.componentOriginName &&
                                props.componentOriginName.map((component, i) => {
                                    return (
                                        <option key={i} value={component.name}>
                                            {component.name}
                                        </option>
                                    );
                                })}
                        </select>
                        <span className='floating--label--select required'>
                            Nom du composant d'origine
                        </span>
                    </div>
                </div>
                <div className='container--info--tuple'>
                    <div className='group--input'>
                        <select
                            name='type'
                            onChange={handleChangeType}
                            value={relationType.type}
                            required>
                            <option value=''></option>
                            {props.relations.map((relation, i) => {
                                return (
                                    <option key={i} value={relation.name}>
                                        {relation.name}
                                    </option>
                                );
                            })}
                        </select>
                        <span className='floating--label--select required'>Relation</span>
                    </div>
                </div>
                <div className='container--info--tuple'>
                    <div className='group--input'>
                        <select
                            name='componentTargetType'
                            onChange={handleChange}
                            value={newRelation.componentTargetType}
                            required>
                            <option value=''></option>
                            {props.components &&
                                props.components.map((component, i) => {
                                    return (
                                        <option key={i} value={component.name}>
                                            {component.name}
                                        </option>
                                    );
                                })}
                        </select>
                        <span className='floating--label--select required'>
                            Composant cible
                        </span>
                    </div>
                    <div className='group--input'>
                        <select
                            name='componentTargetName'
                            onChange={handleChange}
                            value={newRelation.componentTargetName}
                            required>
                            <option value=''></option>
                            {props.componentTargetName &&
                                props.componentTargetName.map((component, i) => {
                                    return (
                                        <option key={i} value={component.name}>
                                            {component.name}
                                        </option>
                                    );
                                })}
                        </select>
                        <span className='floating--label--select required'>
                            Nom du composant cible
                        </span>
                    </div>
                </div>

和我的不同测试的功能评论：

    const handleChange = (event) => {
        setNewRelation({
            ...newRelation,
            [event.target.name]: event.target.value,
        });
        if (event.target.name === "componentOriginType") {
            propsGetComponentOriginNames(event.target.value);
        } else if (event.target.name === "componentTargetType") {
            propsGetComponentTargetNames(event.target.value);
        }
    };

    // =======================================================================

    // const test = (type) => {
    //  props.getComponentOriginNames(type);
    // };
    // const handleChangeOrigin = (event) => {
    //  test(event.target.value);
    //  setNewRelation({
    //      ...newRelation,
    //      [event.target.name]: event.target.value,
    //  });
    // };

    // const handleChangeTarget = (event) => {
    //  props.getComponentTargetNames(event.target.value);
    //  setNewRelation({
    //      ...newRelation,
    //      [event.target.name]: event.target.value,
    //  });
    // };
    // =======================================================================

    const propsGetComponentOriginNames = props.getComponentOriginNames;
    const propsGetComponentTargetNames = props.getComponentTargetNames;

    // useEffect(() => {
    //  propsGetComponentOriginNames(newRelation.componentOriginType);
    // }, [
    //  propsGetComponentOriginNames,
    //  newRelation.componentOriginType,
    //  relationType.type,
    // ]);

    // useEffect(() => {
    //  propsGetComponentTargetNames(newRelation.componentTargetType);
    // }, [
    //  newRelation.componentTargetType,
    //  propsGetComponentTargetNames,
    //  relationType.type,
    // ]);

    // =======================================================================

标签： javascriptreactjsformsfunction