为何同类型Setting组件仅移动端可修改useState值？

问题说明 #

我在项目里遇到个问题：Setting组件分别用在Sidebar.js（非移动端）和Navbar.js（移动端），但只有移动端的Setting能修改内部useState值，非移动端的不行，且此时Navbar里的Setting会被隐藏。需求是两边都能正常修改pages的状态。

问题根源分析 #

1. 独立组件实例状态不共享：你当前的Setting组件每个实例都维护自己的useState(pages)，Sidebar和Navbar里的是两个完全独立的组件，状态完全隔离，修改一个不会同步到另一个。
2. DOM操作存在隐患：用document.getElementById("pages")获取输入值的方式不符合React数据流思路，当页面存在多个相同id的元素时，该方法只会返回第一个匹配项，非移动端场景下可能获取到错误的元素值，导致修改失效。
3. Redux同步时机错误：在组件顶层直接调用dispatch(pageDisplayed(pages))，每次组件渲染都会执行，但setPages是异步操作，这里dispatch的始终是修改前的旧值，无法正确同步到Redux。

解决方案 #

既然已经使用Redux，应该把pages的状态完全交给Redux全局管理，去掉Setting组件内部的useState，将其改为受控组件，确保所有实例共享同一数据源，修改状态时全局同步。

修改后的Setting.js代码：

import "./setting.css";
import { useDispatch, useSelector } from "react-redux";
import { pageDisplayed } from "../../redux/ducks/SettingSlice";
import { useState, useEffect } from "react";

const Setting = () => {
  // 从Redux获取全局pages状态
  const globalPages = useSelector(state => state.setting.pages);
  const dispatch = useDispatch();
  // 本地临时保存输入值，避免直接修改全局状态
  const [inputValue, setInputValue] = useState(globalPages.toString());

  // 全局状态更新时同步本地输入值
  useEffect(() => {
    setInputValue(globalPages.toString());
  }, [globalPages]);

  const handleSave = (e) => {
    e.preventDefault();
    const newPage = parseInt(inputValue, 10);
    // 校验输入合法性，避免非数字或无效值
    if (!isNaN(newPage) && newPage > 0) {
      dispatch(pageDisplayed(newPage));
    }
  };

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return ( 
    <div className="setting">
      <h6>Setting:</h6>
      <form onSubmit={handleSave}>
        <label className="setting_subForm">Pages displayed:</label>
        <input 
          className="setting_subForm" 
          type="number"
          value={inputValue}
          onChange={handleInputChange}
          min="1"
        />
        <input className="setting_save" type="submit" value="save" />
      </form>
    </div>
  );
}
 
export default Setting;

关键修改说明 #

1. 全局状态共享：用useSelector获取Redux中的全局pages状态，确保所有Setting实例使用同一数据源。
2. 受控组件改造：输入框通过value绑定本地临时状态，onChange实时更新输入值，避免直接操作DOM。
3. 输入合法性校验：将input类型改为number并添加min限制，保存时转换为数字并校验有效性，避免无效值进入状态。
4. 状态同步处理：通过useEffect监听全局状态变化，同步更新本地输入值，确保全局状态修改后输入框内容实时刷新。

内容的提问来源于stack exchange，提问作者Biru Skai