У меня есть пользовательский компонент, который использует Apollo и React-Select и имеет две мутации (см. Ниже).Реактивный выбор является многозначным и должен быть пользовательским, потому что мне нужен флажок «isSelected».Не показано в этом коде, но исходный список опций передается из родительского контейнера.
Родительский Select и его мутация работают, как и ожидалось.Тем не менее, я сталкиваюсь с несколькими странными проблемами с пользовательским MultiValueContainer.Во-первых, при первом выборе любого из флажков появляется сообщение об ошибке «Не удается вызвать setState (или forceUpdate) для несмонтированного компонента».Обратите внимание, что у меня есть пустая функция componentWillUnmount только для того, чтобы увидеть, вызывается ли она, чего нет.Но (я полагаю) в результате этого, когда вызывается мутация toggleThing, у состояния нет переменных, необходимых для завершения запроса.Второй раз, когда я нажимаю, он работает как положено, за исключением второго выпуска.
Вторая проблема заключается в том, что функция onCompleted для мутации MultiValueContainer никогда не срабатывает, поэтому, даже если сервер возвращает ожидаемые данные, он никогда не возвращается к мутации и, следовательно, к компоненту.Функция onCompleted в родительском Select работает должным образом.
Заранее благодарим за любые идеи, которые могут быть у кого-либо.Возможно, излишне говорить, что я относительно новичок, чтобы реагировать / apollo / реагировать-выбирать и заранее извиняться за любые ошибки новичка.Кроме того, я попытался очистить и упростить код, чтобы извиниться за любые ошибки переименования.
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;