如何：componentDidMount 和 onclick javascript 问题

Question

所以，我有按钮点击，这些按钮点击是在 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}}

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

Answer 1

这里有多个问题：

在按钮上调用 click 函数不会触发 React 的 onClick 处理程序
直接访问 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 并可以在您的 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）存在问题，因为我们在渲染方法中设置状态。永远不要这样做。渲染方法应该是纯净的，没有任何副作用。否则你会因为重新渲染而面临无限循环问题。

如何：componentDidMount 和 onclick javascript 问题

HowTo: componentDidMount and onclick javascript issue

javascript

apollo

reactjs

prisma