Question

我有一个使用Apollo和React-Select的自定义组件，并且有两个突变（请参见下文）。 react-select是多值的，需要自定义，因为我需要在其上选择“ isSelected”复选框。该代码未显示，但是初始选项列表是从父容器传入的。

父选择及其变异按预期工作。但是，自定义MultiValueContainer遇到了一些奇怪的问题。第一个是我第一次选择任何一个复选框时，收到一条错误消息，提示“无法在已卸载的组件上调用setState（或forceUpdate）”。请注意，在下面，我有一个空的componentWillUnmount函数，只是为了查看是否被调用，而不会。但是（因此，我假设）结果是，当调用“ toggleThing”突变时，状态没有完成请求所必需的var。第二次单击时，它可以按预期运行，但第二期除外。

第二个问题是MultiValueContainer突变上的onCompleted函数永远不会触发，因此即使服务器返回了预期的数据，它也似乎永远不会返回到突变，因此也永远不会返回到组件。父Select上的onCompleted函数按预期工作。

在此先感谢任何人的见解。也许不用说，对于任何新手错误，我都是较新的做出反应/阿波罗/反应选择并事先道歉的人。另外，我还尝试清理和简化代码，以便为任何重命名错误道歉。

const UPDATE_THINGS = gql`
    mutation UpdateThings(
        $id: ID!
        $newThings: [ThingInput]
    ) {
        updateThings(
            id: $id
            newThings: $newThings
        ) {
            id
        }
    }
`;

const TOGGLE_THING = gql`
    mutation ToggleThing($id: ID!, $isChecked: Boolean) {
        toggleThing(
            id: $id
            isChecked: $isChecked
        ) {
            id
        }
    }
`;

class ThingList extends Component {
    stylesObj = {
        multiValue: base => {
            return {
                ...base,
                display: 'flex',
                alignItems: 'center',
                paddingLeft: '10px',
                background: 'none',
                border: 'none'
            };
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            selectedThings: [],
            selectedThingId: '',
            selectedThingIsChecked: false
        };
    }

    onUpdateComplete = ({ updateThings }) => {
        console.log('onUpdateComplete');
        console.log('...data', updateThings );
        this.setState({ selectedThings: updateThings });
    };

    onToggleThing = (thingId, isChecked, toggleThing) => {
        console.log('onToggleThing, thingId, isChecked');

        this.setState(
                {
                    selectedThingId: thingId,
                    selectedThingIsChecked: isHighPisCheckedoficiency
                },
                () => toggleThing()
            );
    };

    onToggleThingComplete = ({ onToggleThing }) => {
        console.log('onToggleThingComplete ');
        console.log('...data', onToggleThing );
        this.setState({ selectedThings: onToggleThing });
    };

    handleChange = (newValue, actionMeta, updateThings) => {
        this.setState(
            {
                selectedThings: newValue
            },
            () => updateThings()
        );
    };

    isThingSelected = thing=> {
        return thing.isSelected;
    };

    getSelectedThings = selectedThings => {
        console.log('getSelectedSkills');
        return selectedThings ? selectedThings.filter(obj => obj.isSelected) : [];
    };

    componentWillUnmount() {
        console.log('componentWillUnmount');
    }

    render() {
        const self = this;
        const MultiValueContainer = props => {
            // console.log('...props', props.data);
            return (
                <Mutation
                    mutation={ TOGGLE_THING }
                    onCompleted={self.onToggleThingComplete}
                    variables={{
                        id: self.state.selectedThingId,
                        isChecked: self.state.selectedThingIsChecked
                    }}>
                    {(toggleThing, { data, loading, error }) => {
                        if (loading) {
                            return 'Loading...';
                        }

                        if (error) {
                            return `Error!: ${error}`;
                        }

                        return (
                            <div className={'option d-flex align-items-center'}>
                                <input
                                    type={'checkbox'}
                                    checked={props.data.isChecked}
                                    onChange={evt => {
                                        self.onToggleThing(
                                            props.data.id,
                                            evt.target.checked,
                                            toggleIsHighProficiency
                                        );
                                    }}
                                />
                                <components.MultiValueContainer {...props} />
                            </div>
                        );
                    }}
                </Mutation>
            );
        };

        return (
            <Mutation
                mutation={UPDATE_THINGS}
                onCompleted={this.onUpdateComplete}
                variables={{ id: this.id, newThings: this.state.selectedThings}}>
                {(updateThings, { data, loading, error }) => {
                    if (loading) {
                        return 'Loading...';
                    }

                    if (error) {
                        return `Error!: ${error}`;
                    }

                    return (
                        <div>
                            <Select
                                options={this.props.selectedThings}
                                styles={this.stylesObj}
                                isClearable
                                isDisabled={this.props.loading}
                                isLoading={this.props.loading}
                                defaultValue={this.props.selectedThings.filter(
                                    obj => obj.isSelected
                                )}
                                isOptionSelected={this.isOptionSelected}
                                isMulti={true}
                                onChange={(newValue, actionMeta) =>
                                    this.handleChange(
                                        newValue,
                                        actionMeta,
                                        updateThings
                                    )
                                }
                                components={{
                                    MultiValueContainer
                                }}
                            />
                        </div>
                    );
                }}
            </Mutation>
        );
    }
}

export default ThingsList;

Answer 1

您要在每个{ "repositories": [ { "type": "vcs", "url": "https://github.com/JakarCo/PHP-Request-Handler" }, { "type": "vcs", "url": "https://github.com/JakarCo/PHP-Request-Handler-Installer" } ], "require": { "JakarCo/PHP-Request-Handler": "dev-master", "JakarCo/PHP-Request-Handler-Installer": "dev-master" } }上重新定义MultiValueContainer，这不是一个好习惯，可能会导致意外行为。尝试将其移动到单独的组件中，以查看是否有帮助。

React Select与自定义MultiValueContainer和Apollo突变不配合

1 个答案: