时间戳

首页 > 解决方案 > 将更新的状态值从父级传递给子级。反应打字稿

reactjs - 将更新的状态值从父级传递给子级。反应打字稿

问题描述

我是 React Typescript 的新手，我想将一些数据从父母传递给孩子。因此，基本上每当用户单击特定元素时，它都会激活父组件中的功能。当该函数运行时，它将布尔值更改为它的对立面，这可以正常工作。然后它应该将值传递给另一个孩子。但是由于某种原因，从父级传递给子级的值永远不会改变。它应该像这样工作：

子 1 --activateFunction---> 父 --runFunction--> this.state.hideCart = false/true

父 --this.state.hideCart--> 子 2 --coverCart = this.props.hideCart--

但是 Child 2 中的值永远不会正确更新，我不知道为什么。

      /*CHILD 1*/
export default class Navbar extends Component <{handleCart:any}> {
    render() {
        return (
            <div style={navbar}>
                <h1>Navbar</h1>
                <h4 onClick={() => this.props.handleCart()}>Shopping Cart</h4>
            </div>
        )
    }
}


       /*PARENT*/
export default class Layout extends Component <{fixCart?:boolean}> {

    state = {
        hideCart: true
    }

    render() {
        return (
            <div style={layout}>
                <Navbar handleCart={this.displayCart} />
                <Counters fixCart={this.state.hideCart} />
                <Content />
                <Footer />
            </div>
        )
    }

    displayCart = () => { 
        if (this.state.hideCart == true) {
            this.setState({hideCart: false})
        }
        else {
            this.setState({hideCart: true})
        }
        console.log(this.state.hideCart);

    }
}



        /*CHILD 2*/
export default class Counters extends Component <{fixCart:any},State>{
    state = { 
        counters: [
            { id: "vegetables", value: 1},
        ],
        hideCart: this.props.fixCart
    }
}

标签： reactjstypescript

解决方案

您使用的方法让用户以及代码审查者感到困惑。为了解决这些类型的数据传递功能，引入了React-Redux。全局维护状态变量，您将能够从任何地方访问。

顺便说一句，尝试检查您在子组件中收到的道具的值。我建议你更好地使用 React-Redux-Store。希望能帮助到你！。

推荐阅读