文章/答案/技术大牛

发布

社区首页 >问答首页 >重新呈现组件React

问重新呈现组件React
EN

Stack Overflow用户

提问于 2021-03-23 08:44:03

回答 2查看 77关注 0票数 1

我在一个react应用程序上工作，当用户切换按钮时，定价将根据用户的喜好进行更改。

在父应用程序app.js中单击按钮后，我遇到了重新呈现状态的问题。

我的目标是:当切换按钮改变时，用更新后的值重新渲染组件。

App.js

import './App.css';
import "./components/Switch.css";
import Pricingbox from './Pricingbox';
import { useState } from "react";

function App() {
  const [price, setPrice] = useState(1);
  const [toggle, setToggle] = useState(false);
  const toggler = () =>{
      toggle ? setToggle(false): setToggle(true);
      console.log(toggle);
      toggle ? setPrice(0): setPrice(1);
    }
  
  return (
    <main>
    <header className="our-pricing">
      <h1 className="h1">Our Pricing</h1>

      <section className="annuall-monthly">
          <div class="space-around">
            <h3 className="h3">Annually</h3>
              <label className="switch1">
                  <input type="checkbox" onClick={() => toggler()}/>
                  <span className="slider1"/>
              </label>
            <h3 className="h3">Monthly</h3>
          </div>
          
      </section>
        <Pricingbox price={price}/>

    </header>
    
    </main>
  );
}
export default App;

Pricingbox.js

import { useEffect, useState } from "react";

const Pricingbox = ({ price }) => {
    console.log(price);
    const pricingList = [
        {
            id: 1, 
            basic: "$19.99",
            prof: "$24.99",
            master: "$39.99"
             
        },
        {
            id: 2, 
            basic: "$199.99",
            prof: "$249.99",
            master: "$399.99"

        }
    ]
        
    const x = pricingList[price];
    console.log(x);
    const y = x.basic; 
    const z = x.prof; 
    const w = x.master;
    const [priceBasic, setPriceBasic] = useState(y);
    const [priceProf, setPriceProf] = useState(z);
    const [priceMaster, setPriceMaster] = useState(w);   

    
        return ( 
            <main>
                
                <div className="price-rectangle white-box">
                    <div className="pricing-text">
                        <p className="pricing-text-space">Basic</p>
                        <h2>{priceBasic}</h2>
                        <p className="bottom-p">
                            <hr></hr>
                            500 GB Storage
                            <hr></hr>
                            2 Users Alllowed
                            <hr></hr>
                            Send up tp 3GB
                            <hr></hr> 
                        </p>
                        <button className="btn purplish-box">Learn More</button>
                    </div>
                </div>
                <div className="price-rectangle purplish-box">
                    <div className="pricing-text">
                        <p className="pricing-text-space">Professional</p>
                        <h2>{priceProf}</h2>
                        <p className="bottom-p">
                            <hr></hr>
                            1 GB Storage
                            <hr></hr>
                            5 Users Alllowed
                            <hr></hr>
                            Send up tp 10GB
                            <hr></hr> 
                        </p>
                        <button className="btn white-box">Learn More</button>
                    </div>
                </div>
                <div className="price-rectangle white-box">
                    <div className="pricing-text">
                        <p className="pricing-text-space">Master</p>
                        <h2>{priceMaster}</h2>
                        <p className="bottom-p">
                            <hr></hr>
                            2 GB Storage
                            <hr></hr>
                            10 Users Alllowed
                            <hr></hr>
                            Send up tp 20GB
                            <hr></hr> 
                        </p>
                        <button className="btn purplish-box">Learn More</button>
                    </div>
                </div>
            </main>
        );
}
 
export default Pricingbox;

javascript

reactjs

render

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-03-23 08:49:30

您可以像这样修复Pricingbox。只要price发生变化，您就可以通过将[price]设置为useEffect的第二个参数来更新组件的state。

import { useEffect, useState } from "react";

const Pricingbox = ({ price }) => {
    const pricingList = [
        {
            id: 1, 
            basic: "$19.99",
            prof: "$24.99",
            master: "$39.99"
             
        },
        {
            id: 2, 
            basic: "$199.99",
            prof: "$249.99",
            master: "$399.99"

        }
    ];
    const [priceBasic, setPriceBasic] = useState(0);
    const [priceProf, setPriceProf] = useState(0);
    const [priceMaster, setPriceMaster] = useState(0);
    useEffect(() => {
        const x = pricingList[price];
        console.log(x);
        const y = x.basic; 
        const z = x.prof; 
        const w = x.master;
        setPriceBasic(y);
        setPriceProf](z);
        setPriceMaster](w);  
    }, [price]);

        return ( 
            <main>
                
                <div className="price-rectangle white-box">
                    <div className="pricing-text">
                        <p className="pricing-text-space">Basic</p>
                        <h2>{priceBasic}</h2>
                        <p className="bottom-p">
                            <hr></hr>
                            500 GB Storage
                            <hr></hr>
                            2 Users Alllowed
                            <hr></hr>
                            Send up tp 3GB
                            <hr></hr> 
                        </p>
                        <button className="btn purplish-box">Learn More</button>
                    </div>
                </div>
                <div className="price-rectangle purplish-box">
                    <div className="pricing-text">
                        <p className="pricing-text-space">Professional</p>
                        <h2>{priceProf}</h2>
                        <p className="bottom-p">
                            <hr></hr>
                            1 GB Storage
                            <hr></hr>
                            5 Users Alllowed
                            <hr></hr>
                            Send up tp 10GB
                            <hr></hr> 
                        </p>
                        <button className="btn white-box">Learn More</button>
                    </div>
                </div>
                <div className="price-rectangle white-box">
                    <div className="pricing-text">
                        <p className="pricing-text-space">Master</p>
                        <h2>{priceMaster}</h2>
                        <p className="bottom-p">
                            <hr></hr>
                            2 GB Storage
                            <hr></hr>
                            10 Users Alllowed
                            <hr></hr>
                            Send up tp 20GB
                            <hr></hr> 
                        </p>
                        <button className="btn purplish-box">Learn More</button>
                    </div>
                </div>
            </main>
        );
}
 
export default Pricingbox;

票数 1

Stack Overflow用户

发布于 2021-03-24 09:06:21

在我看来，这可以更简单，并且建议的useEffect是不必要的。我简化了代码，只有一个切换变量，而不是两个，并删除建议的useEffect并用一个简单的赋值替换它。显然，如果您需要这两个切换，您可以将其添加回来。

import React from 'react';
import Pricingbox from './Pricingbox';
import { useState } from "react";

function App() {
  const [toggle, setToggle] = React.useState(false);
  const toggler = () => setToggle(!toggle);
  
  return (
    <main>
    <header className="our-pricing">
      <h1 className="h1">Our Pricing</h1>
      <section className="annuall-monthly">
          <div class="space-around">
            <h3 className="h3">Annually</h3>
              <label className="switch1">
                  <input type="checkbox" onClick={() => toggler()}/>
                  <span className="slider1"/>
              </label>
            <h3 className="h3">Monthly</h3>
          </div>
      </section>
        <Pricingbox price={toggle?1:0}/>
    </header>
    </main>
  );
}
export default App;

最初，Pricingbox文件包含以下行：

const [priceBasic, setPriceBasic] = useState(y);

只有当您计划稍后更改定价时，才有必要这样做。这就是你想做的吗？如果您不需要这样做，那么您可以将Pricingbox文件简化为：

import React from 'react';
import { useEffect, useState } from "react";

const Pricingbox = ({ price }) => {
    const pricingList = [
        {
            id: 1, 
            basic: "$19.99",
            prof: "$24.99",
            master: "$39.99"
             
        },
        {
            id: 2, 
            basic: "$199.99",
            prof: "$249.99",
            master: "$399.99"

        }
    ]

    const x = pricingList[price];
    const priceBasic  = x.basic;
    const priceProf   = x.prof;
    const priceMaster = x.master;
   
        return ( 
            <main>
                
                <div className="price-rectangle white-box">
                    <div className="pricing-text">
                        <p className="pricing-text-space">Basic</p>
                        <h2>{priceBasic}</h2>
                        <p className="bottom-p">
                            <hr></hr>
                            500 GB Storage
                            <hr></hr>
                            2 Users Alllowed
                            <hr></hr>
                            Send up tp 3GB
                            <hr></hr> 
                        </p>
                        <button className="btn purplish-box">Learn More</button>
                    </div>
                </div>
                <div className="price-rectangle purplish-box">
                    <div className="pricing-text">
                        <p className="pricing-text-space">Professional</p>
                        <h2>{priceProf}</h2>
                        <p className="bottom-p">
                            <hr></hr>
                            1 GB Storage
                            <hr></hr>
                            5 Users Alllowed
                            <hr></hr>
                            Send up tp 10GB
                            <hr></hr> 
                        </p>
                        <button className="btn white-box">Learn More</button>
                    </div>
                </div>
                <div className="price-rectangle white-box">
                    <div className="pricing-text">
                        <p className="pricing-text-space">Master</p>
                        <h2>{priceMaster}</h2>
                        <p className="bottom-p">
                            <hr></hr>
                            2 GB Storage
                            <hr></hr>
                            10 Users Alllowed
                            <hr></hr>
                            Send up tp 20GB
                            <hr></hr> 
                        </p>
                        <button className="btn purplish-box">Learn More</button>
                    </div>
                </div>
            </main>
        );
}
 
export default Pricingbox;

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66755741

复制

相似问题

问重新呈现组件React
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重新呈现组件ReactEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重新呈现组件React
EN