[英]React conditional rendering based on other state doesn't work
I'm new to react and I honestly can't understand conditional rendering.我是新手,老实说我无法理解条件渲染。 I have one useState and one useReducer:
我有一个 useState 和一个 useReducer:
const [Trivia, setTrivia] = useState("Nothing")
const [{ currentOperand, previousOperand, Operation }, dispatch] = useReducer(reducer, {})
Following tutorials, I made a calculator with currentOperand, previousOperand, Operation and every time the currentOperand is 10, I want trivia to be "something".按照教程,我用 currentOperand、previousOperand、Operation 制作了一个计算器,每次 currentOperand 为 10 时,我都希望琐事成为“某事”。 I honestly don't understand, since I don't get any errors.
老实说,我不明白,因为我没有收到任何错误。 I tried this:
我试过这个:
const CheckEqual = () => {
if (currentOperand === 10) {
return (
<h4>
{setTrivia("Yes!")}
</h4>
)
} else {
return (
<h4>
{Trivia}
</h4>
)
}
}
and this和这个
<div> { CheckEqual() } </div>
but nothing appears.但什么也没有出现。 Not even errors.
甚至没有错误。 Any help?
有什么帮助吗? Full code:
完整代码:
import React, { useReducer, useState, useEffect } from "react"
import DigitButton from "./DigitButton"
import OperationButton from "./OperationButton"
import "./styles.css"
export const actionsPossible = {
add_: "add",
operation_: "operation",
clear_: "clear",
delete_: "delete",
equal_: "equal",
}
function reducer(state, { type, payload }) {
switch (type) {
case actionsPossible.add_: //add
if (state.overwrite) {
return {
...state,
currentOperand: payload.digit,
overwrite: false,
}
}
if (payload.digit === "." && state.currentOperand == null) {
return state
}
if (payload.digit === "0" && state.currentOperand === "0") {
return state
}
if (payload.digit === "." && state.currentOperand.includes(".")) {
return state
}
return {
...state,
currentOperand: `${state.currentOperand || ""}${payload.digit}`,
}
case actionsPossible.clear_: //clear
{
return {}
}
case actionsPossible.operation_: //choosing operation
if (state.currentOperand == null && state.previousOperand == null) {
return state
}
if (state.currentOperand == null) {
return {
...state,
Operation: payload.Operation,
}
}
if (state.previousOperand == null) {
return {
...state,
Operation: payload.Operation,
previousOperand: state.currentOperand,
currentOperand: null,
}
}
return {
...state,
previousOperand: evaluate(state),
currentOperand: null,
operation_: payload.operation_,
}
case actionsPossible.equal_: //equal
{
if (state.Operation == null || state.currentOperand == null || state.previousOperand == null) {
return state
}
return {
...state,
overwrite: true,
previousOperand: null,
currentOperand: evaluate(state),
Operation: null,
}
}
case actionsPossible.delete_: //delete
{
if (state.overwrite) {
return {
...state,
overwrite: false,
currentOperand: null
}
}
if (state.currentOperand == null) {
return state
}
if (state.currentOperand.length === 1) {
return {
...state,
currentOperand: null
}
}
return {
...state,
currentOperand: state.currentOperand.slice(0, -1)
}
}
default: return state //default case
}
}
function evaluate({ currentOperand, previousOperand, Operation }) {
const previous = parseFloat(previousOperand)
const current = parseFloat(currentOperand)
if (isNaN(previous) || isNaN(current)) return ""
let computation = ""
switch (Operation) {
case "+":
computation = previous + current
break
case "-":
computation = previous - current
break
case "*":
computation = previous * current
break
case "÷":
computation = previous / current
break
default:
return
}
return computation.toString()
}
function App() {
const [Trivia, setTrivia] = useState("")
const [theme, setTheme] = useState("light")
const [{ currentOperand, previousOperand, Operation }, dispatch] = useReducer(reducer, {})
useEffect(() => {
if (currentOperand === 10) {
setTrivia("Yes!");
}
else {
setTrivia("Nothing");
}
}, [currentOperand])
return (
<div className="calculator-grid">
<div className="output">
<div className="previous-operand">{formatOperand(previousOperand)} {Operation}</div>
<div className="current-operand">{formatOperand(currentOperand)}</div>
</div>
<button className="span-two" onClick={() => dispatch({ type: actionsPossible.clear_ })}>AC</button>
<button onClick={() => dispatch({ type: actionsPossible.delete_ })}>DEL</button>
<OperationButton Operation="÷" dispatch={dispatch} />
<DigitButton digit="1" dispatch={dispatch} />
<DigitButton digit="2" dispatch={dispatch} />
<DigitButton digit="3" dispatch={dispatch} />
<OperationButton Operation="*" dispatch={dispatch} />
<DigitButton digit="4" dispatch={dispatch} />
<DigitButton digit="5" dispatch={dispatch} />
<DigitButton digit="6" dispatch={dispatch} />
<OperationButton Operation="+" dispatch={dispatch} />
<DigitButton digit="7" dispatch={dispatch} />
<DigitButton digit="8" dispatch={dispatch} />
<DigitButton digit="9" dispatch={dispatch} />
<OperationButton Operation="-" dispatch={dispatch} />
<DigitButton digit="." dispatch={dispatch} />
<DigitButton digit="0" dispatch={dispatch} />
<button className="span-two" onClick={() => dispatch({ type: actionsPossible.equal_ })}>=</button>
{/*----------------------------------TRIVIA--------------------------------*/}
<div className="count">
<h1>Random Trivia</h1>
<h2>(it will randomly pop up the more you use the calculator)</h2>
<h4>{Trivia}</h4>
</div>
</div>
);
}
export default App;
In your component, use useEffect()
to mutate Trivia
's value when currentOperand
was mutated.在您的组件中,当
currentOperand
发生变异时,使用useEffect()
来变异Trivia
的值。
Then just use Trivia
to display in return
然后只需使用
Trivia
显示作为return
like喜欢
const [Trivia, setTrivia] = useState("Nothing")
const [{ currentOperand, previousOperand, Operation }, dispatch] = useReducer(reducer, {})
useEffect(()=>{
if (currentOperand === 10) {
setTrivia("Yes!");
}
else {
setTrivia("Nothing");
}
}, [currentOperand])
return <>
{Trivia}
</>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.