0

我有一个非常简单的组件，使用Connectfromaws-amplify-react

const EmployeeExpensesTable = () => {
  const [user, setUser] = useState(null)
  useEffect(() => { Auth.currentAuthenticatedUser().then(user => setUser(user)) }, [])
  console.log(user)

  if(!user) { return null }

  return (
    <Connect

      query={graphqlOperation(queries.listTransactions, { owner: user.username })}

      subscription={graphqlOperation(subscriptions.onCreateTransaction, { owner: user.username })}

      onSubscriptionMsg={(prev, { onCreateTransaction }) => {
        console.log('oncreatetransaction:', onCreateTransaction)
        console.log('prev', prev)
        return onCreateTransaction
      }}

    >
      {
        ({ data: { listTransactions }, loading, errors }) => {

          console.log('transactions', listTransactions)

          if (errors.length) return (<h3>Error</h3>)

          if (loading || !listTransactions) return (<p>loading...</p>)

          return (<core.components.Table data={listTransactions.items} />)
        }
      }
    </Connect>
  )
}

export default EmployeeExpensesTable

我有一个将事务添加到 DynamoDB 表的外部 ETL 流程。订阅正在触发，我的oncreatetransaction消息正在与新数据一起显示，并且Connect组件重新渲染，但它使用原始数据而不是新数据进行渲染。我究竟做错了什么？

4

1 回答 1

1

事实证明，这onSubscriptionMsg就像Connect组件状态的减速器。您将获得函数的先前值和新值，您需要返回新状态。

onSubscriptionMsg={(prev, data) => ({
        listTransactions: {
          items: [...prev.listTransactions.items.slice(-9), data.onCreateTransaction ]
        }
      })

以上对我很有用。这.slice(-9)是因为我只关心添加的最后 10 行。

于 2019-10-25T22:14:39.667 回答