Untergeordnete Komponente wird nicht aktualisiert in React

Question

Hilfe! Meine Kindkomponente wird nicht in meiner Reaktions-App aktualisiert!

Ich möchte cartNumber zur Seitenkomponente bringen, die dann an die Header-Komponente übergeben wird, aber die Nummer wird nicht angezeigt!

Geordnete Komponente

class Shop extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     merchants: [], 
     error: null, 
     loading: true, 
     order: [] 
    }; 
    } 

    componentWillMount() { 
    Meteor.call("merchants.getMerchants", (error, response) => { 
     if (error) { 
     this.setState(() => ({ error: error })); 
     } else { 
     this.setState(() => ({ merchants: response })); 
     } 
    }); 
    } 

    componentDidMount() { 
    setTimeout(() => this.setState({ loading: false }), 800); // simulates loading of data 
    } 

    goBack =() => this.props.history.push("/"); 
    goCart =() => { 
    try { 
     Orders.insert(this.state.order), this.props.history.push("/cart"); 
    } catch (error) { 
     throw new Meteor.Error("there was an error", error); 
    } 
    }; 

    onAddToCart(cartItem) { 
    let { order } = this.state; 
    order.push(cartItem); 
    console.log(order.length); 
    } 

    render() { 
    const { loading } = this.state; 
    const { merchants, error } = this.state; 
    const { data } = this.state; 
    const { order } = this.state; 

    const getProductsFromMerchant = ({ products, brands }) => 
     products.map(({ belongsToBrand, ...product }) => ({ 
     ...product, 
     brand: brands[belongsToBrand] 
     })); 

    const products = merchants.reduce(
     (acc, merchant) => [...acc, ...getProductsFromMerchant(merchant)], 
     [] 
    ); 

    if (loading) { 
     return (
     <Page 
      pageTitle="Shop" 
      history 
      goBack={this.goBack} 
      goCart={this.goCart} 
     > 
      <div className="loading-page"> 
      <i 
       className="fa fa-spinner fa-spin fa-3x fa-fw" 
       aria-hidden="true" 
      /> 
      <br /> <br /> 
      <span>Loading...</span> 
      </div> 
     </Page> 
    ); 
    } 

    return (
     <Page 
     pageTitle="Shop" 
     history 
     goBack={this.goBack} 
     goCart={this.goCart} 
     cartNumber={order.length} 
     > 
     <div className="shop-page"> 
      {products.map(({ id, ...product }) => 
      <Product 
       {...product} 
       key={id} 
       history 
       onAddToCart={this.onAddToCart.bind(this)} 
      /> 
     )} 
     </div> 
     </Page> 
    ); 
    } 
} 

export default Shop; 

Hier ist die Seite Komponente, die die Header-Komponente

export const Page = ({ 
    children, 
    pageTitle, 
    history, 
    goBack, 
    goCart, 
    cartNumber 
}) => 
    <div className="page"> 
    <Header goBack={goBack} goCart={goCart} history cartNumber> 
     {pageTitle} 
    </Header> 
    <main> 
     <MuiThemeProvider> 
     {children} 
     </MuiThemeProvider> 
    </main> 
    <Footer /> 
    </div>; 

export default Page; 

Und schließlich ist dies die Header, wo ich in den cartNumber bringen wollen enthält.

const Header = ({ children, goBack, goCart, cartNumber, pageTitle }) => 
    <header> 
    <button onClick={goBack} className="back-button"> 
     {/* Image added here to show image inclusion, prefer inline-SVG. */} 
     <img alt="Back" src={`/icon/header/back-white.svg`} /> 
    </button> 
    <h1> 
     {children} 
    </h1> 
    <div className="right-content"> 
     ({cartNumber}) 
     <i 
     className="fa fa-shopping-cart fa-2x" 
     aria-hidden="true" 
     onClick={goCart} 
     /> 
    </div> 
    </header>; 
export default withRouter(Header); 

Answer 1

Sie vorbei cartNumber als boolean:

<Header goBack={goBack} goCart={goCart} history cartNumber> 

Pass als Wert:

<Header goBack={goBack} goCart={goCart} history={history} cartNumber={cartNumber}>