Question

我对redux有点困惑，并做出反应...

我有一个呈现子组件（NutrientsTable）的父组件（SingleList）。父级传递给子级 productList 的状态，然后子级执行componentDidMount调用操作中的子级，该操作会更新 currentListNutrients ，然后在子级render（）中使用它来显示。

我尝试将calculateNutrients声明为组件中的辅助方法，然后分配给变量，然后在render（）中使用它。结果，它可以正常工作，但是我要将所有应用程序动作都放入Action Creator中，所以我需要使用redux来完成。

父项单项列表

@response = Question.joins(:survey).where('surveys.product_id = ? and surveys.question_one_response = ? and questions.question_number = ? and questions.status = ?', @product.id, 1, 4, nil)

@response = Question.joins(:survey).where('surveys.product_id = ? and surveys.question_one_response = ? and questions.question_number = ? and questions.status = ?', @product.id, 1, 4, "")

@response = Question.joins(:survey).where('surveys.product_id = ? and surveys.question_one_response = ? and questions.question_number = ? and questions.status = ?', @product.id, 1, 4, blank?)

Children Comp 营养表

import { connect } from "react-redux";
import NutrientsTable from "../NutrientsTable";

class SingleList extends Component {

  render() {
    return (
      <div className="single-list">
        <NutrientsTable 
          productsList={this.props.list.productsList}
        />
      </div>
    );
  }
}

function mapStateToProps({ lists }, ownProps) {
  return {
    list: lists[ownProps.match.params.id]
  };
}

export default connect(
  mapStateToProps,
  {}
)(SingleList);

操作计算营养素

import { connect } from 'react-redux';
import { calculateNutrients } from '../actions';

class NutrientsTable extends Component {

    componentDidMount() {
        this.props.calculateNutrients(this.props.productsList);
    }

    render() { 
        const { calories, carbohydrates, proteins, fats } = this.props.nutrients;

        return (
            <div>{calories} {carbohydrates} {proteins} {fats}</div>
        )
    }
}

const mapStateToProps = ({currentListNutrients}) => {
    return { nutrients: currentListNutrients }
}

export default connect(mapStateToProps, { calculateNutrients })(NutrientsTable);

和 Reducer 只需返回action.payload

第一次渲染时一切正常，但是当我在父级中执行某些操作并更改 productList 状态时，子级不会使用新的 productList 重新渲染。我知道这是导致componentDidMount调用仅一个的原因。但是我应该在哪里打电话呢？我无法使用任何生命周期方法来解决它。有什么建议吗？

Answer 1

首先，如果您使用Redux，并且Redux存储中存在数据（应用程序的状态），则不必将数据从父级传递给子级。只需将connect用于子组件。当检测到Redux存储中的任何更改（应用程序状态）时，子组件应更新。

第二，当您希望更改发生时，您必须dispatch并对Redux进行操作，该操作告诉Redux调用api（或类似的东西）并更新其存储。

要处理api调用，您应该使用Redux-thunk或Redux-saga。

更改父级传递的属性时，如何重新渲染React子组件（redux）

1 个答案: