redux 中的本地状态未更新

Question

我的 class 中有状态，更新了两个函数：

export default class ProductList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            productIdListToEdit: [],
        }
    }


handleCheckClick = (elementId, e) => {
  ...
        this.setState({ productIdListToEdit: tempList })
    }


checkAllAction = () => {
  ...
        this.setState({ productIdListToEdit: [1, 2, 3] })
    }
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这个状态在 return 转移到 class:

 <GroupEditButton
 productIdListToEdit={this.state.productIdListToEdit}   >

使用"handleCheckClick "改变状态后Class内部状态正在改变，但使用"checkAllAction"后，局部状态仍然改变，但更深（在较低的Class-EditButton ) 就像一个冻结的状态 productIdListToEdit 不会改变。

export default class EditButton extends Component {
    constructor(props) {
        super(props)
        this.state = {
            productIdListToEdit: this.props.productIdListToEdit,
        }
    }

    render() {
        console.log(this.state.productIdListToEdit)
        if (this.state.productIdListToEdit.length > 0) {
            return (
                ...
            )
        }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

构造函数仅在 class 初始化时调用一次。要查看更新，直接使用props即可：

export default class EditButton extends Component {

    render() {
        console.log(this.props.productIdListToEdit)
        if (this.props.productIdListToEdit.length > 0) {
            return (
                ...
            )
        }
    }

redux 中的本地状态未更新

Local state in redux is not updated

state

local

reactjs

redux