Estoy tratando de usar un número ingresado por el usuario para múltiples cálculos en un componente. Puedo usar la entrada para el primer cálculo (tarimas) pero no para los demás. Por ejemplo, se emite newArea / 0.145. Pero el siguiente cálculo para viguetas (newArea / 0.45) no se genera, ni tampoco los siguientes cálculos. ¡Cualquier ayuda sería muy apreciada!
import { useState } from "react"; import AddPercent from "./AddPercent"; const Counter = () => { const [area, setArea] = useState(""); const newArea = (e) => { const value = e.target.value; const deckCalc = deckBoards(value); setArea(deckCalc); }; const deckBoards = (newArea) => { return (newArea / 0.145).toFixed(2); }; const joists = (newArea) => { return (newArea / 0.45 + 1).toFixed(2); }; const sixMJoists = (joists) => { return (joists / 6).toFixed(2); }; const fourMJoists = (joists) => { return (joists / 4.8).toFixed(2); }; const screws = (joists) => { return (joists * 13.2).toFixed(0); }; return ( <div label="Deck"> <h2>Total area of deck</h2> Area <input placeholder="Enter area here" type="text" onChange={newArea} type="number" /> <br /> <h2>Deck boards</h2>Deck boards at 140mm wide : {area} lineal metres <AddPercent /> <br /> <h2>Joists</h2>Joists based on 450mm spacing : {joists} lineal metres <p>Which is equal to this many 6m lengths : {sixMJoists}</p> <p>or</p> <p>This many 4.8m lengths : {fourMJoists}</p> <AddPercent /> <br /> <h2>Screws</h2>Number of screws needed : {screws} <AddPercent /> </div> ); };<h2>Joists</h2>Joists based on 450mm spacing : {joists} lineal metres .
Aquí joists es un nombre de función, debe crear un nuevo estado para cada variable, por ejemplo joists, sixMJoists, como lo ha creado para el área. O puedes usar así.
import "./styles.css"; import { useState } from "react"; // import AddPercent from "./AddPercent"; const Counter = () => { const [area, setArea] = useState(""); const newArea = (e) => { const value = e.target.value; const deckCalc = deckBoards(value); setArea(deckCalc); }; const deckBoards = (newArea) => { return (newArea / 0.145).toFixed(2); }; const joists = (newArea) => { return (newArea / 0.45 + 1).toFixed(2); }; const sixMJoists = (joists) => { return (joists / 6).toFixed(2); }; const fourMJoists = (joists) => { return (joists / 4.8).toFixed(2); }; const screws = (joists) => { return (joists * 13.2).toFixed(0); }; return ( <div label="Deck"> <h2>Total area of deck</h2> Area <input placeholder="Enter area here" type="text" onChange={newArea} type="number" /> <br /> <h2>Deck boards</h2>Deck boards at 140mm wide : {area} lineal metres {/* <AddPercent /> */} <br /> <h2>Joists</h2>Joists based on 450mm spacing : {joists(area)} lineal metres <p>Which is equal to this many 6m lengths : {sixMJoists(joists(area))}</p> <p>or</p> <p>This many 4.8m lengths : {fourMJoists(joists(area))}</p> {/* <AddPercent /> */} <br /> <h2>Screws</h2>Number of screws needed : {screws(joists(area))} {/* <AddPercent /> */} </div> ); }; export default function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <Counter /> </div> ); }Espero que esto resuelva tu problema y que entiendas tu error en el código.
Consulte este enlace de código de sandbox