-1

所以，我有在 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}}

但这只会导致函数根本不触发。

4

1 回答 1

3

这里有多个问题：

  1. 在按钮上调用click函数不会触发 React 的onClick处理程序
  2. 直接访问 DOM 根本不是你在 React 中做事的方式。这是非常糟糕的做法。

我想要发生的是在页面加载时触发一次 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：

您的主要问题是如何在 react-apollo 的 mount 上执行突变？

您可以创建一个组件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）是有问题的，因为我们在渲染方法中设置状态。永远不应该这样做。渲染方法应该是纯的，没有任何副作用。否则，您将因重新渲染而面临无限循环问题。

于 2018-11-24T17:05:36.113 回答