Reactjs 子组件未在React中更新

救命啊！我的子组件未在我的react应用程序中更新

我想将cartNumber带到页面组件，然后将其传递到header组件，但该数字甚至没有显示

父组件

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;

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;

类商店扩展组件{
建造师（道具）{
超级（道具）；
此.state={
商户：[]，
错误：null，
加载：对，
订单：[]
};
}
组件willmount（）{
Meteor.call（“merchants.getMerchants”，（错误，响应）=>{
如果（错误）{
this.setState（（）=>（{error:error}））；
}否则{
this.setState（（）=>（{merchants:response}））；
}
});
}
componentDidMount（）{
setTimeout（（）=>this.setState（{loading:false}），800）；//模拟数据加载
}
goBack=（）=>this.props.history.push（“/”）；
goCart=（）=>{
试一试{
Orders.insert（this.state.order）、this.props.history.push（“/cart”）；
}捕获（错误）{
抛出新的流星。错误（“有一个错误”，错误）；
}
};
onAddToCart（cartItem）{
设{order}=this.state；
订单.推送（cartItem）；
console.log（订单长度）；
}
render（）{
const{loading}=this.state；
const{merchants，error}=this.state；
const{data}=this.state；
const{order}=this.state；
const getProductsFromMerchant=（{产品，品牌}）=>
products.map（{belongsToBrand，…product}）=>({
产品
品牌：品牌[属于品牌]
}));
const products=merchants.reduce(
（acc，商户）=>[…acc，…从商户（商户）获取产品]，
[]
);
如果（装载）{
返回(



加载。。。
);
}
返回(
{products.map（{id，…product}）=>
)}
);
}
}
出口默认商店；

下面是包含页眉组件的页面组件

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;

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;

导出常量页=({
儿童
页面标题，
历史
戈巴克，
戈卡特，
车号
}) =>
{pageTitle}
{儿童}
;
导出默认页面；

最后这是我想把cartNumber带到的标题

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);

const头=（{children，goBack，goCart，cartNumber，pageTitle}）=>
{/*此处添加图像以显示图像包含，首选内联SVG.*/}
{儿童}
（{cartNumber}）
;
使用路由器导出默认值（标题）；

您正在以布尔值传递

cartNumber

：

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

将其作为值传递：

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

我可能没有看到，但看起来您正在直接修改状态。这是错误的方法--像你应该的那样使用

setState

。另外：{pageTitle}不应该是{pageTitle}为什么在所有的setState调用中都有fat arrow函数？啊，太好了，谢谢。当父组件更改其状态时，我仍然无法使其正确更新。你知道我怎么做吗？你的代码中没有任何东西会更新订单状态。如果你改变状态，你总是必须

setState（）

hanks Andy之后，我对这个还是很陌生的。非常感谢你！别担心，react有些怪癖需要一段时间才能完全进入你的头脑。随着时间的推移，它变得越来越容易。