reactjs - 当 props 改变时如何更新 React/recompose 组件？

Question

我正在编写这个产品列表组件，但我正在与状态作斗争。列表中的每个产品本身就是一个组件。一切都按预期渲染，除了当 prop 更改时组件不会更新。我正在使用 recompose 的 withPropsOnChange()，希望每次 shouldMapOrKeys 中的 props 更改时都会触发它。然而，这种情况永远不会发生。

让我展示一些代码:

import React from 'react'
import classNames from 'classnames'
import { compose, withPropsOnChange, withHandlers } from 'recompose'
import { addToCart } from 'utils/cart'

const Product = (props) => {

  const {
    product,
    currentProducts,
    setProducts,
    addedToCart,
    addToCart,
  } = props

  const classes = classNames({
    addedToCart: addedToCart,
  })

  return (
    <div className={ classes }>
      { product.name }
      <span>$ { product.price }/yr</span>
      { addedToCart ?
        <strong>Added to cart</strong> :
        <a onClick={ addToCart }>Add to cart</a> }
    </div>
  )
}

export default compose(
  withPropsOnChange([
    'product',
    'currentProducts',
  ], (props) => {

    const {
      product,
      currentProducts,
    } = props

    return Object.assign({
      addedToCart: currentProducts.indexOf(product.id) !== -1,
    }, props)
  }),
  withHandlers({
    addToCart: ({
      product,
      setProducts,
      currentProducts,
      addedToCart,
    }) => {
      return () => {
        if (addedToCart) {
          return
        }
        addToCart(product.id).then((success) => {
          if (success) {
            currentProducts.push(product.id)
            setProducts(currentProducts)
          }
        })
      }
    },
  }),
)(Product)

我认为这不相关，但 addToCart 函数返回一个 Promise。目前，它始终解析为 true。

另一个说明:currentProducts 和 setProducts 分别是保存购物车数据的类(模型)的属性和方法。这也运行良好，不会抛出异常或显示意外行为。

此处的预期行为是:将产品添加到购物车并更新 currentProducts 列表后，addedToCart 属性将更改其值。我可以确认 currentProducts 正在按预期更新。但是，这部分代码未到达(我已在该行添加了一个断点):

return Object.assign({
  addedToCart: currentProducts.indexOf(product.id) !== -1,
}, props)

由于我已经在另一个组件中使用了类似的结构 - 主要区别在于我正在“监听”的 props 之一是由 withState() 定义的 -,我想知道我在这里缺少什么。我的第一个想法是问题是由 currentProducts 的直接更新引起的，这里:

currentProducts.push(product.id)

所以我尝试了不同的方法:

const products = [ product.id ].concat(currentProducts)
setProducts(products)

不过，这在执行过程中并没有改变任何东西。

我正在考虑使用 withState 而不是 withPropsOnChange。我想这会起作用。但在这样做之前，我想知道我在这里做错了什么。

Answer 1

正如我想象的那样，使用 withState 帮助我实现了预期的行为。但这绝对不是我想要的答案。无论如何，我将其发布在这里愿意帮助面临类似问题的其他人。我仍然希望找到一个答案，解释为什么我的第一个代码没有抛出任何错误，但它不起作用。

export default compose(
  withState('addedToCart', 'setAddedToCart', false),
  withHandlers({
    addToCart: ({
      product,
      setProducts,
      currentProducts,
      addedToCart,
    }) => {
      return () => {
        if (addedToCart) {
          return
        }
        addToCart(product.id).then((success) => {
          if (success) {
            currentProducts.push(product.id)
            setProducts(currentProducts)
            setAddedToCart(true)
          }
        })
      }
    },
  }),
  lifecycle({
    componentWillReceiveProps(nextProps) {
      if (this.props.currentProducts !== nextProps.currentProducts ||
          this.props.product !== nextProps.product) {
        nextProps.setAddedToCart(nextProps.currentProducts.indexOf(nextProps.product.id) !== -1)
      }
    }
  }),
)(Product)

此处的更改是:

1. 删除了用于处理addedToCart“计算”的withPropsOnChange；
2. 添加了 withState 来声明并创建 addedToCart 的 setter；
3. 当产品成功添加到购物车时，开始调用 addToCart 处理程序内的 setAddedToCart(true)；
4. 通过重构的 lifecycle 添加了 componentWillReceiveProps 事件，以便在 props 更改时更新 addedToCart。

其中一些更新基于 this answer .