标签：渲染 text button1 react item state 组件 redux store

我想实现的是一个组件能改变另一个组件button上面的text的功能，查阅了很多资料，决定用redux来实现，因为两个组件并不是父子组件的关系，套用起来会很麻烦。

看网上很多人页面渲染不成功是直接在reducer里修改了state的值，从而导致页面未重新渲染，我尝试使用...object后，页面还是没有重新渲染。

正确修改后的reducer:

const button_text_reducer=(state,action)=>{
    switch(action.type){
        case "change_button_text":
            return {...{store_button1_text:"Log Out"}}
        default:
            return state
    }
}
export default button_text_reducer;

我意识到，可能是在把store的值渲染到页面这里写错了，研究后，发现果然是这样。

之前我直接将store的值渲染到页面，而没有和这个组件的state产生任何联系，当然store里的值改变，这个组件并不会重新渲染。

之前：

<Col>
                        <Button ghost>
                            <Link to="/login/" >
                                {/*{this.state.button1_text}*/}
                                {store.getState().store_buttuon1_text}
                            </Link>

                        </Button>
                    </Col>

之后：

在constructor里用store的监听函数subscribe监听store的值是否改变，如果改变则setstate(一定要用setstate，而不是直接改变this.state的值)。并设置此组件的state为store item的值。

constructor(props) {
        super(props);
        this.state = {
            button1_text:store.getState().store_buttuon1_text,
            button2_text:"Sign Up",
            button3_text:"Housing List",
        }
        store.subscribe(() => {
            this.setState({button1_text:store.getState()['store_button1_text']})
                console.log(store.getState()['store_button1_text'])
        }

        )
    }

最后将渲染的元素从store里item改成：

<Col>
                        <Button ghost>
                            <Link to="/login/" >
                                {this.state.button1_text}

                            </Link>

                        </Button>
                    </Col>

成功渲染！

标签：渲染,text,button1,react,item,state,组件,redux,store
来源： https://blog.csdn.net/waoecher/article/details/121205362

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。