基于其他状态的 React 条件渲染不起作用

Question

我刚开始反应，老实说我不理解条件渲染。我有一个useState和一个useReducer:

const [Trivia, setTrivia] = useState("Nothing")
const [{ currentOperand, previousOperand, Operation }, dispatch] = useReducer(reducer, {})

在教程之后，我用currentOperand、previousOperand、Operation做了一个计算器，每次currentOperand是10时，我都希望琐事是"0"；什么"；。我真的不明白，因为我没有任何错误。我试过这个：

const CheckEqual = () => {
if (currentOperand === 10) {
return (
<h4>
{setTrivia("Yes!")}
</h4>
)
} else {
return (
<h4>
{Trivia}
</h4>
)
}
}

和这个

<div> { CheckEqual() } </div>

但什么也没出现。甚至没有错误。有什么帮助吗？完整代码：

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;

Answer 1

在组件中，当currentOperand发生突变时，使用useEffect()来突变Trivia的值。

然后只使用Trivia在return中显示

像

const [Trivia, setTrivia] = useState("Nothing")
const [{ currentOperand, previousOperand, Operation }, dispatch] = useReducer(reducer, {})
useEffect(()=>{
if (currentOperand === 10) {
setTrivia("Yes!");
}
else {
setTrivia("Nothing");
}
}, [currentOperand])
return <>
{Trivia}
</>

更新【2022年9月5日】

假设你的减速器工作正常。

那么这些代码可能会有所帮助当currentOperand===10时，Trivia更改

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
function App() {
const [Trivia, setTrivia] = React.useState("Nothing")
const [currentOperand, setCurrentOperand] = React.useState(0);
React.useEffect(()=>{
if (currentOperand === 10) {
setTrivia("Yes!");
}
else {
setTrivia("Nothing");
}
}, [currentOperand])

const handleClick = () =>{
setCurrentOperand(currentOperand+1)
}
return <div>
<button onClick={handleClick}>Add currentOperand</button>
<div>{Trivia}</div>
<div>{currentOperand}</div>
</div>
}
</script>
<script type="text/babel">
ReactDOM.render(
<App></App>
, document.getElementById("root"));
</script>