React:如何更新依赖于状态更改的变量

Question

我试图使用React来制作一个地下城和龙角色表(点击这里进行预览)。我坚持使用的一个组件是能力修饰符，如下所示：

使用React.useState()，我可以通过单击箭头自动更改数字"7“

我已经破解了useState()的基础知识。如果单击MUI箭头按钮，现在可以更改红色圆圈中名为count的变量。我希望字符串值(现在设置为"15")是动态的，并且等于(count-10)/2。

我试图使用onChange使它工作，但没有运气。我的组件代码如下所示。我做错了什么？

`

import React from "react"
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import Button from '@mui/material/Button';

export default function StatBox(props) {
  const[count, setCount] = React.useState(8)

  const incrementCount = () => {
    setCount(count+1);

}

let modifier = "15"
if (count && !isNaN){
  const modifierNum = Math.floor(Number(count)-10/2)
  if(modifierNum > 0){
    modifier = "+" + modifierNum
  }
  else{
    modifier = modifierNum.toString()
  }
}


const decrementCount = () => {
  setCount(count-1);  
}

    return (
      <div className="col text-center border border-danger rounded mt-2 mb-2">
        <label>{props.stats}</label>
        <div className="d-and-d-statbox-modifier">{modifier}</div>
        <div className="row justify-content-center mb-2">
          <Button
            onClick={decrementCount}
            onChange={(e) => count.onChange(count, e.target.value)}
            size="sm"
            variant="contained"
            color="error"
          >
            <ArrowBackIosIcon fontSize="small" />
          </Button>
          <div>
            <span className="mx-1 border-danger text-center dndstatrow">
              {count}
            </span>
          </div>
          <Button
            onClick={incrementCount}
            onChange={(e) => count.onChange(count, e.target.value)}
            size="sm"
            variant="contained"
            color="error"
          >
            <ArrowForwardIosIcon fontSize="small" />
          </Button>
        </div>
      </div>
    );
}

`

Answer 1

解决了！

import React from "react"
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import Button from '@mui/material/Button';

export default function StatBox(props) {
  const[count, setCount] = React.useState(8)

  const incrementCount = () => {
    setCount(count+1);

}

let modifierNum = Math.floor(((count)-10)/2)

let modifier = ""
if(modifierNum > 0){
  modifier = "+" + modifierNum
}
else{
  modifier = modifierNum.toString()
}

const decrementCount = () => {
  setCount(count-1);  
}

    return (
      <div className="col text-center border border-danger rounded mt-2 mb-2">
        <label>{props.stats}</label>
        <div className="d-and-d-statbox-modifier">{modifier}</div>
        <div className="row justify-content-center mb-2">
          <Button
            onClick={decrementCount}
            size="sm"
            variant="contained"
            color="error"
          >
            <ArrowBackIosIcon fontSize="small" />
          </Button>
          <div>
            <span className="mx-1 border-danger text-center dndstatrow">
              {count}
            </span>
          </div>
          <Button
            onClick={incrementCount}
            size="sm"
            variant="contained"
            color="error"
          >
            <ArrowForwardIosIcon fontSize="small" />
          </Button>
        </div>
      </div>
    );
}