<Connect /> 重新呈现 onSubscriptionMsg，但不使用新数据

Question

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

的 Connect

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

我有一个外部 ETL 过程，可以将事务添加到 DynamoDB table。订阅正在触发，我的 oncreatetransaction 消息正在显示新数据，Connect 组件重新呈现，但它使用它的原始数据而不是新数据呈现。我做错了什么？

Answer 1

原来 onSubscriptionMsg 就像 Connect 组件状态的缩减器。您已获得函数的先前值和新值，您需要 return 新状态。

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

以上内容对我来说效果很好。 .slice(-9) 是因为我只关心添加的最后 10 行。