HowTo: проблема с componentDidMount и onclick javascript
Итак, у меня есть нажатия кнопок, которые программно активируются на componentDidMount. Проблема, с которой я сталкиваюсь, заключается в том, что из-за нескольких нажатий кнопок это приводит к полному перекосу желаемого результата одного из запланированных щелчков, который обновляет базу данных Prisma.
Я хочу, чтобы updateItem запускался один раз при загрузке страницы. Как лучше всего этого добиться ?:
componentDidMount(){
document.getElementById("updateItemButton").click();
document.getElementById("toggleCartButton").click();
}
render() {
return (
<Query query = {SINGLE_ITEM_QUERY} variables = {{ id: this.props.itemid }}>
return (
<Mutation mutation = {TOGGLE_CART_MUTATION}>
{(toggleCart) => {
return (
<Mutation
mutation = {UPDATE_ITEM_MUTATION}
variables = {{
id: this.props.itemid,
quantity: itemDetails.quantity - this.props.quantity,
}}
refetchQueries = {[{ query: CURRENT_USER_QUERY }]}
>
{(updateItem, { loading, error }) => (
<>
<div><button type = "button" hidden id = "updateItemButton" disabled = {loading} onClick = {updateItem} /></div>
<div><button type = "button" hidden id = "toggleCartButton" disabled = {loading} onClick = {toggleCart} /></div>
</>
)}
</Mutation>
);
}}
</Mutation>
);
}}
</Query>
);
}Я пытался
onclick = {(x) => {x}}
но это только привело к тому, что функции вообще не сработали.
@Dmitriy Ты должен меня простить, я новичок в мире реакции и все еще нахожусь на ногах. Вы имели в виду как, this.updateItem? Если так, то ничего не произошло.
Да, это то, что я имел в виду, запускать this.updateItem () при монтировании компонента. Где у вас определена функция updateItem? если ничего не происходит, появляется ли ошибка в консоли?
@Dmitriy Как показано в коде, методы становятся доступными после каждой мутации, то есть {(toggleCart) => {}}. В консоли ошибок не отображалось.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Здесь есть несколько проблем:
- Вызов функции
clickна кнопке не запускает обработчикиonClickReact - Прямой доступ к DOM принципиально не такой, как в React. Это очень плохая практика.
What I want to happen is for updateItem to be triggered once when the page is loaded. What's the best way to achieve this?:
Вы можете вызвать метод updateItem напрямую, вместо того, чтобы программно нажимать кнопку.
Обновление №1:
например
Вы можете вызвать его прямо в JSX, где он доступен.
{(updateItem, { loading, error }) => {
// do whatever you want with updateItem
updateItem();
// return JSX
return (
<>
<div><button type = "button" hidden id = "updateItemButton" disabled = {loading} onClick = {updateItem} /></div>
<div><button type = "button" hidden id = "toggleCartButton" disabled = {loading} onClick = {toggleCart} /></div>
</>
);
}}
Помните, что вы можете написать любой допустимый код JavaScript в фигурных скобках. Обновление №2:
Ваша основная проблема - Как выполнить мутацию монтирования в react-apollo?
Вы можете создать компонент MutationOnMount и использовать его в своей функции мутации, чтобы воспользоваться преимуществами componentDidMount.
class MutationOnMount extends React.Component {
componentDidMount() {
this.props.mutation(); // Run mutation on Mount
}
render() {
return this.props.children;
}
}
Теперь ваш код будет выглядеть так:
{(updateItem, { loading, error }) => (
<MutationOnMount mutation = {updateItem} />
<div><button type = "button" hidden id = "updateItemButton" disabled = {loading} onClick = {updateItem} /></div>
<div><button type = "button" hidden id = "toggleCartButton" disabled = {loading} onClick = {toggleCart} /></div>
)}
Ссылка:https://github.com/apollographql/react-apollo/issues/1939#issuecomment-404616804
Предыдущий подход (Обновление №1) был проблематичным, потому что мы устанавливали состояние в методе рендеринга. Такого делать нельзя. Метод рендеринга должен быть чистым, без каких-либо побочных эффектов. В противном случае вы столкнетесь с проблемой бесконечного цикла из-за повторного рендеринга.
«Вы можете вызвать метод updateItem напрямую, вместо того, чтобы программно нажимать кнопку». - Как новичок, чтобы отреагировать, как и где именно это сделать, ведь методы открываются только после того, как мутации произойдут? Я попробовал this.updateItem из componentDidMount, но ничего не произошло.
Конечно, updateItem не будет работать в componentDidMount, потому что он там недоступен. Вы можете вызвать его прямо из JSX
По какой-то причине вызов методов в соответствии с вашим описанием вызывает бесконечный цикл, который в конечном итоге приводит к зависанию моего браузера. Выдается предупреждение об удовлетворительных функциях в рендере, а затем оно зависает.
Основная проблема - How to execute a mutation on mount?. Я обновил свой ответ
Вы пробовали просто вызвать функцию updateItem на componentDidMount?