我在handleChange函数中设置状态/更新输入文本值时遇到一些问题。
我有一个组件，它在加载页面时循环通过一个holes迭代器并生成一些div：

{holes.map((item, index) => (
          <React.Fragment>
          
             <div className="griditem">
              <input
                type="text"
                className="input"
                label="playerAScore"
                data-hole-number={item.holeNumber}
                data-id={item.id}
                value="10"
                id={players[0]?.id && `${players[0].id}-${item.holeNumber}`}
                onChange={(event) =>
                  handleChange(
                    event,
                    index,
                    item.par,
                    item.stroke,
                    handicapPlayerA,
                    item.holeNumber,
                    item.id,
                    players[0].id
                  )
                }
                ref={inputRef}
              />
            </div>
              <div className="griditem">
              <input
                type="text"
                className="input"
                label="playerBScore"
                value="20"
                id={players[1]?.id && `${players[1].id}-${item.holeNumber}`}
                onChange={(event) =>
                  handleChange(
                    event,
                    index,
                    item.par,
                    item.stroke,
                    handicapPlayerB,
                    item.holeNumber,
                    item.id,
                    players[1].id
                  )
                }
              />
            </div>
            <div className="griditem">
              <input
                type="text"
                className="input"
                label="playerCScore"
                id={players[2]?.id && `${players[2].id}-${item.holeNumber}`}
                onChange={(event) =>
                  handleChange(
                    event,
                    index,
                    item.par,
                    item.stroke,
                    handicapPlayerC,
                    item.holeNumber,
                    item.id,
                    players[2].id
                  )
                }
              />
            </div>          
        </React.Fragment>
  ))}

我的handleChange函数看起来像这样：

const handleChange = (
event,
inputId,
index,
par,
stroke,
handicap,
holeNumber,
holeId,
playerId
  ) => {
    const inputValue = event.target.value;
    const inputElementId = event.target.id;

     // Update the inputValues state with the new value
    setInputValues((prevState) => ({
      ...prevState,
      [inputElementId]: inputValue,
    }));

    const score = calculatePoints(par, inputValue, handicap, stroke);

    // Update the input value directly
    const inputElement = document.getElementById(inputElementId);
    inputElement.value = score;

    alert(inputElement.value);

    // Trigger a re-render of the component
    setRenderKey((prevKey) => prevKey + 1);

    // Update the corresponding state
    return score;
};

我为inputValues和renderKey以及其他useState设置了一些常量：

const [inputValues, setInputValues] = useState({});
  const [renderKey, setRenderKey] = useState(0);

我已经尝试了许多不同的方法来更新输入字段的值，但它没有。我可以看到，在handlechange中，一切都设置正确，但react在退出handleChange函数后没有更新值。