reactjs - 当我每次单击按钮时数字是奇数时，我想添加一个框。想法？

Question

这是我正在使用的代码。我想要发生的是，当我单击第二个名为“重置”的按钮时，所有的框都会出现，并且数字会变回零。当我单击另一个按钮时，我希望每当数字为奇数时框就增加一个。它部分工作，但我似乎无法完全做到。

    import React from 'react';
    import Box from "./Box";

    function DataPage(props){
        const [number, setNumber]=React.useState(0);
        const[color,setColor]=React.useState("purple");
        const[data,setData]=React.useState([{name:"Luke", age:26}]);
        const[submit]=React.useState(false);
        //const[reset]=React.useState(0);

        React.useEffect(()=>{
            if(number>5){
                setColor("red");
            }

        }, [number]);

        React.useEffect(()=>{
            if(number ===1 || number===3){
                setNumber(1);
            }

        }, [number]);

        React.useEffect(()=>{

            let ogData = data;
            ogData.push({name:"freddy", age:30});
            setData(ogData);

        }, [number,data, submit]);

        let boxEles = data.map((it, idx)=>
            <Box name={it.name} age={it.age}/>

        )

        return(
            <div>
                <h1>{props.match.params.id}</h1>
                <button onClick={()=>setNumber(number+1)}>Increase by 1</button>
                <button onClick={()=>setNumber(0)&&this.number({boxEles: 0})}>Reset</button>
                <h3>{number}</h3>
                <div style={{backgroundColor:color, height:"100px", width:"100px", marginTop:"30px"}}></div>
                {boxEles}

            </div>
       )
    }

    export default DataPage;'

---

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

function Box(props){

   // const [name]=React.useState(props.name);
    const [number]=React.useState(props.age);
    //const [color]=React.useState(props.color);
    //const [id]=React.useState(props.id)

    //const addUp = ()=>{
     //  setNumber(number+10);
     //  if(number>=80){
     //      setColor("#E0FFFF")
      //   }
     //};

    let style ={
        backgroundColor:"none",
        minheight: number+"px",
        color:"white"
    };

    return(
        <div className={"box"} style={style}>
            <div style={{backgroundColor:"green", height:"100px", width:"100px", marginTop:"30px"}}></div>
        </div>
    )
}

export default Box;'

标签： reactjs