Javascript 在ReactJS上的不同组件之间更新状态

我正在尝试将状态从其他组件更新为其他组件

我想在header.jsx上，当我单击product.jsx上的添加到购物车按钮时，更新状态total

  import React from 'react';
    import { render } from 'react-dom';
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

    import Header from './header';
    import Footer from './footer';
    import Posts from './posts';
    import Post from './post';
    import Products from './products';
    import Product from './product';
    import Page from './page';

    // Load the Sass file

    require('./style.scss');
    const App = () => (
        <div id="page-inner">
            <Header />
            <main id="content">
                <Switch>

                    <Route exact path={Settings.path + 'products/:product'} component={Product} />

                </Switch>
            </main>
            <Footer />
        </div>
    );

    // Routes
    const routes = (
        <Router>
            <Route path="/" component={App} />
        </Router>
    );

    render(
        (routes), document.getElementById('page')
    );

import React from "react";
import { Link } from "react-router-dom";

class Header extends React.Component {
constructor(props) {
        super(props);
        this.state = { products: [], total: 0 }
        var total = 0;
    this.cartUpdated = this.cartUpdated.bind(this)


      }

      componentDidMount() {

        //let cart = localStorage.getItem('total');
              //   this.setState({  total: 100  });



      }
      cartUpdated()
      {
                 this.setState({  total: cart+100  });


      }




render() {
    return (

          <div className="cart-icon p-3 m-auto">
            Cart/ Total: <span className=""><span className="cart">€</span>{this.state.total}</span><i className="fas fa-shopping-cart" />
          </div>

    );
  }
  }

export default Header;

import React from "react";
import NotFound from "./not-found";

import "react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';



class Product extends React.Component {





  constructor(props) {
    super(props);
    this.state = { product: {},  total: 0
};

    // ACTIONS
// addToCart
     this.addToCart = this.addToCart.bind(this);





  }
  addToCart() 
  {
        this.props.cartUpdated;

     /*
        let total = localStorage.getItem('total') 
                      ? JSON.parse(localStorage.getItem('total')) : {};

        localStorage.setItem('total', 100); */

  }



  componentDidMount() {


          this.fetchData();


  }

  fetchData = () => {
    .......
  };

  renderProduct() {
     if (this.state.product.images) {
 const images = [];
 if (this.state.product) {

   this.state.product.images.map((image, i) => {  
    var new_image = {"original":image, "thumbnail":image}  ; 
          images.push(new_image);
        });
 }




    return (

      <div className="col-md-12">
      <div className="row">
        <div className="col-md-6">
              <ImageGallery items={images} showPlayButton={false} showFullscreenButton={false} thumbnailPosition="left" />
           </div>
                <div className="col-md-6">
                <h4 className="card-title">{this.state.product.name}</h4>
            <p className="card-text">
              <strike>${this.state.product.regular_price}</strike>{" "}
              <u>${this.state.product.sale_price}</u>
            </p>
            <p className="card-text">
              <small className="text-muted">
                {this.state.product.stock_quantity} in stock
              </small>
            </p>
            <p
              className="card-text"
              dangerouslySetInnerHTML={{
                __html: this.state.product.description
              }}
            />
            <div className="superflex add_to_cart_wrapper">
  <button type="submit" name="add-to-cart" value={93} className="add_to_cart btn btn-success alt" onClick={this.props.cartUpdated}>Add to cart</button>
</div>
</div>
</div>
      </div>
    );
  }
  }

  renderEmpty() {
    return <NotFound />;
  }

  render() {
    return (
      <div className="container post-entry">
        {this.state.product ? this.renderProduct() : this.renderEmpty()}
      </div>
    );
  }





}

export default Product;

这是我的密码

index.jsx

  import React from 'react';
    import { render } from 'react-dom';
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

    import Header from './header';
    import Footer from './footer';
    import Posts from './posts';
    import Post from './post';
    import Products from './products';
    import Product from './product';
    import Page from './page';

    // Load the Sass file

    require('./style.scss');
    const App = () => (
        <div id="page-inner">
            <Header />
            <main id="content">
                <Switch>

                    <Route exact path={Settings.path + 'products/:product'} component={Product} />

                </Switch>
            </main>
            <Footer />
        </div>
    );

    // Routes
    const routes = (
        <Router>
            <Route path="/" component={App} />
        </Router>
    );

    render(
        (routes), document.getElementById('page')
    );

import React from "react";
import { Link } from "react-router-dom";

class Header extends React.Component {
constructor(props) {
        super(props);
        this.state = { products: [], total: 0 }
        var total = 0;
    this.cartUpdated = this.cartUpdated.bind(this)


      }

      componentDidMount() {

        //let cart = localStorage.getItem('total');
              //   this.setState({  total: 100  });



      }
      cartUpdated()
      {
                 this.setState({  total: cart+100  });


      }




render() {
    return (

          <div className="cart-icon p-3 m-auto">
            Cart/ Total: <span className=""><span className="cart">€</span>{this.state.total}</span><i className="fas fa-shopping-cart" />
          </div>

    );
  }
  }

export default Header;

import React from "react";
import NotFound from "./not-found";

import "react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';



class Product extends React.Component {





  constructor(props) {
    super(props);
    this.state = { product: {},  total: 0
};

    // ACTIONS
// addToCart
     this.addToCart = this.addToCart.bind(this);





  }
  addToCart() 
  {
        this.props.cartUpdated;

     /*
        let total = localStorage.getItem('total') 
                      ? JSON.parse(localStorage.getItem('total')) : {};

        localStorage.setItem('total', 100); */

  }



  componentDidMount() {


          this.fetchData();


  }

  fetchData = () => {
    .......
  };

  renderProduct() {
     if (this.state.product.images) {
 const images = [];
 if (this.state.product) {

   this.state.product.images.map((image, i) => {  
    var new_image = {"original":image, "thumbnail":image}  ; 
          images.push(new_image);
        });
 }




    return (

      <div className="col-md-12">
      <div className="row">
        <div className="col-md-6">
              <ImageGallery items={images} showPlayButton={false} showFullscreenButton={false} thumbnailPosition="left" />
           </div>
                <div className="col-md-6">
                <h4 className="card-title">{this.state.product.name}</h4>
            <p className="card-text">
              <strike>${this.state.product.regular_price}</strike>{" "}
              <u>${this.state.product.sale_price}</u>
            </p>
            <p className="card-text">
              <small className="text-muted">
                {this.state.product.stock_quantity} in stock
              </small>
            </p>
            <p
              className="card-text"
              dangerouslySetInnerHTML={{
                __html: this.state.product.description
              }}
            />
            <div className="superflex add_to_cart_wrapper">
  <button type="submit" name="add-to-cart" value={93} className="add_to_cart btn btn-success alt" onClick={this.props.cartUpdated}>Add to cart</button>
</div>
</div>
</div>
      </div>
    );
  }
  }

  renderEmpty() {
    return <NotFound />;
  }

  render() {
    return (
      <div className="container post-entry">
        {this.state.product ? this.renderProduct() : this.renderEmpty()}
      </div>
    );
  }





}

export default Product;

从“React”导入React；
从'react dom'导入{render}；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“./头”导入头；
从“./Footer”导入页脚；
从“./Posts”导入帖子；
从“./Post”导入Post；
从“./产品”进口产品；
从“./产品”导入产品；
从“./Page”导入页面；
//加载Sass文件
要求（'./style.scss'）；
常量应用=（）=>(
);
//路线
常数路由=(
);
渲染(
（路由），document.getElementById（'page'）
);

header.jsx

  import React from 'react';
    import { render } from 'react-dom';
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

    import Header from './header';
    import Footer from './footer';
    import Posts from './posts';
    import Post from './post';
    import Products from './products';
    import Product from './product';
    import Page from './page';

    // Load the Sass file

    require('./style.scss');
    const App = () => (
        <div id="page-inner">
            <Header />
            <main id="content">
                <Switch>

                    <Route exact path={Settings.path + 'products/:product'} component={Product} />

                </Switch>
            </main>
            <Footer />
        </div>
    );

    // Routes
    const routes = (
        <Router>
            <Route path="/" component={App} />
        </Router>
    );

    render(
        (routes), document.getElementById('page')
    );

import React from "react";
import { Link } from "react-router-dom";

class Header extends React.Component {
constructor(props) {
        super(props);
        this.state = { products: [], total: 0 }
        var total = 0;
    this.cartUpdated = this.cartUpdated.bind(this)


      }

      componentDidMount() {

        //let cart = localStorage.getItem('total');
              //   this.setState({  total: 100  });



      }
      cartUpdated()
      {
                 this.setState({  total: cart+100  });


      }




render() {
    return (

          <div className="cart-icon p-3 m-auto">
            Cart/ Total: <span className=""><span className="cart">€</span>{this.state.total}</span><i className="fas fa-shopping-cart" />
          </div>

    );
  }
  }

export default Header;

import React from "react";
import NotFound from "./not-found";

import "react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';



class Product extends React.Component {





  constructor(props) {
    super(props);
    this.state = { product: {},  total: 0
};

    // ACTIONS
// addToCart
     this.addToCart = this.addToCart.bind(this);





  }
  addToCart() 
  {
        this.props.cartUpdated;

     /*
        let total = localStorage.getItem('total') 
                      ? JSON.parse(localStorage.getItem('total')) : {};

        localStorage.setItem('total', 100); */

  }



  componentDidMount() {


          this.fetchData();


  }

  fetchData = () => {
    .......
  };

  renderProduct() {
     if (this.state.product.images) {
 const images = [];
 if (this.state.product) {

   this.state.product.images.map((image, i) => {  
    var new_image = {"original":image, "thumbnail":image}  ; 
          images.push(new_image);
        });
 }




    return (

      <div className="col-md-12">
      <div className="row">
        <div className="col-md-6">
              <ImageGallery items={images} showPlayButton={false} showFullscreenButton={false} thumbnailPosition="left" />
           </div>
                <div className="col-md-6">
                <h4 className="card-title">{this.state.product.name}</h4>
            <p className="card-text">
              <strike>${this.state.product.regular_price}</strike>{" "}
              <u>${this.state.product.sale_price}</u>
            </p>
            <p className="card-text">
              <small className="text-muted">
                {this.state.product.stock_quantity} in stock
              </small>
            </p>
            <p
              className="card-text"
              dangerouslySetInnerHTML={{
                __html: this.state.product.description
              }}
            />
            <div className="superflex add_to_cart_wrapper">
  <button type="submit" name="add-to-cart" value={93} className="add_to_cart btn btn-success alt" onClick={this.props.cartUpdated}>Add to cart</button>
</div>
</div>
</div>
      </div>
    );
  }
  }

  renderEmpty() {
    return <NotFound />;
  }

  render() {
    return (
      <div className="container post-entry">
        {this.state.product ? this.renderProduct() : this.renderEmpty()}
      </div>
    );
  }





}

export default Product;

从“React”导入React；
从“react router dom”导入{Link}；
类头扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={products:[]，总计：0}
var合计=0；
this.cartUpdated=this.cartUpdated.bind（this）
}
componentDidMount（）{
//让cart=localStorage.getItem（'total'）；
//这个.setState（{total:100}）；
}
更新后的
{
this.setState（{total:cart+100}）；
}
render（）{
返回(
购物车/总计：€{this.state.Total}
);
}
}
导出默认标题；

product.jsx

  import React from 'react';
    import { render } from 'react-dom';
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

    import Header from './header';
    import Footer from './footer';
    import Posts from './posts';
    import Post from './post';
    import Products from './products';
    import Product from './product';
    import Page from './page';

    // Load the Sass file

    require('./style.scss');
    const App = () => (
        <div id="page-inner">
            <Header />
            <main id="content">
                <Switch>

                    <Route exact path={Settings.path + 'products/:product'} component={Product} />

                </Switch>
            </main>
            <Footer />
        </div>
    );

    // Routes
    const routes = (
        <Router>
            <Route path="/" component={App} />
        </Router>
    );

    render(
        (routes), document.getElementById('page')
    );

import React from "react";
import { Link } from "react-router-dom";

class Header extends React.Component {
constructor(props) {
        super(props);
        this.state = { products: [], total: 0 }
        var total = 0;
    this.cartUpdated = this.cartUpdated.bind(this)


      }

      componentDidMount() {

        //let cart = localStorage.getItem('total');
              //   this.setState({  total: 100  });



      }
      cartUpdated()
      {
                 this.setState({  total: cart+100  });


      }




render() {
    return (

          <div className="cart-icon p-3 m-auto">
            Cart/ Total: <span className=""><span className="cart">€</span>{this.state.total}</span><i className="fas fa-shopping-cart" />
          </div>

    );
  }
  }

export default Header;

import React from "react";
import NotFound from "./not-found";

import "react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';



class Product extends React.Component {





  constructor(props) {
    super(props);
    this.state = { product: {},  total: 0
};

    // ACTIONS
// addToCart
     this.addToCart = this.addToCart.bind(this);





  }
  addToCart() 
  {
        this.props.cartUpdated;

     /*
        let total = localStorage.getItem('total') 
                      ? JSON.parse(localStorage.getItem('total')) : {};

        localStorage.setItem('total', 100); */

  }



  componentDidMount() {


          this.fetchData();


  }

  fetchData = () => {
    .......
  };

  renderProduct() {
     if (this.state.product.images) {
 const images = [];
 if (this.state.product) {

   this.state.product.images.map((image, i) => {  
    var new_image = {"original":image, "thumbnail":image}  ; 
          images.push(new_image);
        });
 }




    return (

      <div className="col-md-12">
      <div className="row">
        <div className="col-md-6">
              <ImageGallery items={images} showPlayButton={false} showFullscreenButton={false} thumbnailPosition="left" />
           </div>
                <div className="col-md-6">
                <h4 className="card-title">{this.state.product.name}</h4>
            <p className="card-text">
              <strike>${this.state.product.regular_price}</strike>{" "}
              <u>${this.state.product.sale_price}</u>
            </p>
            <p className="card-text">
              <small className="text-muted">
                {this.state.product.stock_quantity} in stock
              </small>
            </p>
            <p
              className="card-text"
              dangerouslySetInnerHTML={{
                __html: this.state.product.description
              }}
            />
            <div className="superflex add_to_cart_wrapper">
  <button type="submit" name="add-to-cart" value={93} className="add_to_cart btn btn-success alt" onClick={this.props.cartUpdated}>Add to cart</button>
</div>
</div>
</div>
      </div>
    );
  }
  }

  renderEmpty() {
    return <NotFound />;
  }

  render() {
    return (
      <div className="container post-entry">
        {this.state.product ? this.renderProduct() : this.renderEmpty()}
      </div>
    );
  }





}

export default Product;

从“React”导入React；
从“/未找到”导入未找到；
导入“react image gallery/styles/scss/image gallery.scss”；
从“react image gallery”导入ImageGallery；
类产品扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={product:{}，总计：0
};
//行动
//addToCart
this.addToCart=this.addToCart.bind（this）；
}
addToCart（）
{
更新了this.props.carts；
/*
让total=localStorage.getItem（'total'）
？JSON.parse（localStorage.getItem（'total'））：{}；
localStorage.setItem（'total'，100）*/
}
componentDidMount（）{
这是fetchData（）；
}
fetchData=（）=>{
.......
};
renderProduct（）{
if（this.state.product.images）{
常量图像=[]；
if（此.state.product）{
this.state.product.images.map（（image，i）=>{
var new_image={“原始”：image，“缩略图”：image}；
图片。推送（新图片）；
});
}
返回(
{this.state.product.name}

${this.state.product.regular_price}{”“}
${this.state.product.sale_price}


{this.state.product.stock_quantity}库存中


添加到购物车
);
}
}
renderEmpty（）{
返回；
}
render（）{
返回(
{this.state.product？this.renderProduct（）：this.renderEmpty（）}
);
}
}
导出默认产品；

您可以使用redux跨多个组件管理状态

---

您可以使用redux跨多个组件管理状态

要回答这个问题： 由于状态对组件是私有的，所以您无法在两个react组件之间传递状态。 道具可以在这方面帮助你。道具也不能从一个孩子传递到另一个孩子——它可以从一个孩子传递到另一个孩子。 有一个转折点可以帮助您实现这一点，请按照下面的文章部分“如何将道具从子组件传递到父组件？”来了解这一点： URL:

要回答此问题： 由于状态对组件是私有的，所以您无法在两个react组件之间传递状态。 道具可以在这方面帮助你。道具也不能从一个孩子传递到另一个孩子——它可以从一个孩子传递到另一个孩子。 有一个转折点可以帮助您实现这一点，请按照下面的文章部分“如何将道具从子组件传递到父组件？”来了解这一点：

---

URL:

您可以这样做来实现这一点。但是React JS建议的更干净的解决方案是使用React上下文API

我正在分享React JS文档中的一个链接，它与您想要处理的场景完全相同

另外，由于您使用的是React纯组件函数，因此我们可以使用React钩子，您可以在这里查看

所以在你的代码中应该是这样的

./Total-Context.js

export const TotalContext = React.createContext({
  total: 0,
  setTotal: () => {

  },
});

/index.jsx
从“/Total Context”导入{TotalContext}；
常量应用=（）=>{
const[total，setTotal]=useState（0）；
返回(
);
};

现在我们可以在产品组件中使用TotalContext消费者，并调用该方法在全局上下文中设置total方法，如下所示

./Product.jsx

import { TotalContext } from './Total-Context';

const Product = () => (
<TotalContext.Consumer>
      {({total, setTotal}) => (
        <button
          onClick={() => {setTotal(newTotal)}}
          >
          Update total
        </button>
      )}
</TotalContext.Consumer>
)

/Product.jsx
从“/Total Context”导入{TotalContext}；
常数乘积=（）=>(
{（{total，setTotal}）=>(
{setTotal（新总数）}
>
更新总数
)}
)

---

因此，在调用click方法之后，Header组件应该有total的更新值。

您可以这样做来实现这一点。但更干净的解决方案是su