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

Question

我是 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
    }
}

Answer 1

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

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