Как: компонентDidMount и onclick проблема с JavaScript - PullRequest
Новая
       7

Как: компонентDidMount и onclick проблема с JavaScript

0 голосов
/ 24 ноября 2018

Итак, у меня есть нажатия кнопок, которые программно активируются на 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}}

но это толькозаставил функции вообще не срабатывать.

1 Ответ

0 голосов
/ 24 ноября 2018

Здесь есть несколько проблем:

  1. Вызов функции click на кнопке не вызовет обработчики React onClick
  2. Прямой доступ к DOM принципиально не так, как вы делаетев реакции.Это очень плохая практика.

Я хочу, чтобы updateItem запускался один раз при загрузке страницы.Какой лучший способ добиться этого?:

Вы можете вызвать метод 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:

Ваша основная проблема Каквыполнить мутацию при монтировании в Reaction-Apollo?

Вы можете создать компонент MutationOnMount и использовать его в своей функции Mutation, чтобы воспользоваться 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)было проблематично, потому что мы устанавливали состояние в методе рендеринга.Это никогда не должно быть сделано.Метод рендеринга должен быть чистым без каких-либо побочных эффектов.В противном случае вы столкнетесь с проблемой бесконечного цикла из-за повторного рендеринга.

...