重新渲染组件反应

Question

我正在开发一个 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;

定价框.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;

Answer 1

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

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;

Answer 2

在我看来，这可能更简单，而且建议的 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;