父组件更新时子组件不更新答案

【问题标题】：Child component doesn't update when parent updates父组件更新时子组件不更新
【发布时间】：2020-06-04 01:33:13
【问题描述】：

当我通过子组件使用 addQuantityButton 函数将新产品添加到 products 数组时，子 Product 组件中无法识别对 products 数组的更改。父组件中的addQuantityButtonfunction 正确地将新对象添加到数组中。当我开始使用 Redux 和 mapStateToProps 时，这停止了工作。我在这里做错了什么？

路径：Parent

class Form extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      products: [getNewProduct()]
    };

    this.addQuantityButton = this.addQuantityButton.bind(this);
  }

  addQuantityButton(product_id) {
    let { products } = this.state;

    products = products.map((product) => {
      if (product.product_id === product_id) {
        product.quantities.push(getNewQuantity());

        return product;
      }
      return product;
    });

    this.setState({
      products
    });
  }

  render() {
    const { products } = this.state;
    return (
      <form>
        {products.map((product) => (
          <Product
            key={product.key}
            product_id={product.product_id}
            quantities={product.quantities}
            addQuantityButton={this.addQuantityButton}
          />
        ))}
      </form>
    );
  }
}

路径：Product

class Product extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      unitOptions: []
    };
  }

  render() {
    return (
      <div>
        <div>
          {this.props.quantities.map((quantity) => (
            <p>Example</p>
          ))}
        </div>

        <button
          type="button"
          onClick={() => addQuantityButton(this.props.product_id)}
        >
          Add quanity
        </button>
      </div>
    );
  }
}

Product.propTypes = {
  product_id: PropTypes.string,
  quantities: PropTypes.array,
  addQuantityButton: PropTypes.func
};

const mapStateToProps = (state) => ({
  supplierProducts: state.product.products
});

export default connect(mapStateToProps)(Product);

【问题讨论】：

标签： reactjs redux

【解决方案1】：

child 正在监听 redux 的 state，这与 parent 的 state 不同。 react 组件状态是一回事，redux 状态是另一回事。不建议将 redux 的状态复制到组件的状态，您正在复制状态。

我建议在 Parent's 仅将您的产品映射到道具，然后以 this.props.products.map(... 形式迭代您的表单

在 Children 中，您声明 mapDispatchToProps 负责增加数量。在那里，您通过一些重构声明了您的 addQuantityButton。您将使用 dispatch 而不是接收动作。添加产品的逻辑将在您的减速器中实现。

const mapDispatchToProps = (dispatch, ownProps) => ({
  addQuantityButton: dispatch(addQuantity(ownProps.product_id))
})

您的操作是在某些操作文件中声明的简单函数，它返回一个包含操作类型和有效负载的对象（您可以将有效负载称为其他名称）：

const addQuantity = product_id => ({
  type: 'ADD_QUANTITY',
  payload: product_id
})

现在，使用适当操作的 dispatch 会将对象传递给 reducer，并且拦截 ADD_QUANTITY 的给定 reducer 将负责增加数量，然后返回下一个 redux 状态。

在 reducer 中，你实现了更新状态的逻辑。

function productsReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_QUANTITY': // suggestion, declare your types as a constant in another file
      // also, dont mutate state directly!, you may need to use some deep clone given it's an array of objects 
       return // logic here with action.payload and state.products
    default:
      return state
  }
}

【讨论】：