Question

我正在使用React，Redux和React-Redux Provider函数


// Inside parent component.
@ViewChild('mychild') childComponent: Component2;
  onButtonClick() {

   // Exceute the function of child class.
   console.log( this.childComponent.method1());
  }

// On parent component html.
<component2 #mychild></component2>

如果我将上述const mapStateToProps = (store: any) => { console.log("mapStateToProps", store.textTwo); return store.textTwo; };函数用于mapStateToProps的{{1}}方法并更新其状态，则它将进行console.log mapStateToProps函数中的更改，但不会重新呈现组件，甚至不会出现{ {1}}钩子。

但是当我添加connect时，即突变react-redux返回数据，它将重新呈现整个组件。

componentWillReceiveProps

如何在不重新渲染完整组件的情况下将状态传递给组件的道具。

-更新---

样本状态数据

spread operator

mapStateToProps是显示标题的子组件。 const mapStateToProps = (store: any) => { console.log("mapStateToProps", store.textTwo); return { ...store.textTwo }; <-- this will re render complete component };是我要迭代并列出名称的数据数组。

尝试以下解决方案（@Siva Kondapi Venkata提供），并且可以正常工作，但是如果我在列表中添加新项目，则标题组件也将重新呈现。

store = {
    textTwo: {
        headerText: 'Sample',
        list: [
            {
                id: 1,
                name: 'test 1'
            }
        ]
    },
    text: {}
}

Answer 1

您需要这样做。返回您感兴趣的props。

const mapStateToProps = (store: any) => ({
  textTwo: store.textTwo
});

const mapDispatchToProps = {

};

export default connect(mapStateToProps, mapDispatchToProps)(Component);

react-redux connect（）函数mapStateToProps正在更新，但组件未重新呈现

1 个答案: