將更新的狀態值從父級傳遞給子級。 反應打字稿

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。 希望能幫助到你！。