在线赌场多流应用：isLive状态提示与forceUpdate故障问题

我正在开发一款在线赌场应用，已完成多流展示功能。需求为：当数据库中某条流的isLive=False时，展示对应的状态提示。目前仅能通过forceUpdate()实现该需求，但此方法导致应用出现故障。

相关代码如下：

React组件代码 #

const Tables = ({cat,filters,operator,}) => {
  const [tables, setTables] = useState([])
  const [filteredTables, setFilteredTables] = useState([])
  const [isLive, setIsLive] = useState([])
  const [reducerValue, forceUpdate] = useReducer(x => x + 1,0)
      useEffect(()=>{
      const getTables = async ()=> {
          try{
              const res = await axios.get(
                  cat? 
                  `http://localhost:5000/api/tables?gameType=${cat}`
                  :
                  `http://localhost:5000/api/tables`
                  )
                  setTables(res.data)
                  // const newTables = setTables(res.data);
                  // setTables (oldTables => [...oldTables, newTables]);
          }catch(err){
              console.log(err)
          }
      };
      getTables()
      forceUpdate()
  }, [cat,isLive,reducerValue])

CSS和HTML渲染部分 #

{table.isLive ?  
  <TableNameLive> {table.name}  </TableNameLive> 
  :
  <TableNameDown> Stream Is Down for {table.name} </TableNameDown> 
}

问题分析 #

你的代码存在几个核心问题，导致必须依赖forceUpdate且引发故障：

1. 无限循环触发：useEffect依赖数组包含reducerValue，调用forceUpdate()会修改reducerValue，进而再次触发useEffect，形成无限请求和重渲染循环。
2. 冗余状态维护：isLive状态完全多余，接口返回的tables数组中已包含每条流的isLive字段，无需单独维护该状态，且错误将其放入依赖数组会触发不必要的重渲染。
3. 多余的forceUpdate调用：setTables(res.data)本身就会触发组件重渲染，更新视图，不需要额外调用forceUpdate。

修复方案 #

修复步骤 #

1. 移除冗余状态与forceUpdate：删除isLive状态和useReducer相关代码，直接使用tables中的isLive字段。
2. 清理useEffect依赖：仅保留cat作为依赖，只有分类切换时才重新请求数据。
3. 分离过滤逻辑：如果需要基于filters和operator过滤表格，单独新增useEffect处理过滤逻辑，避免和数据请求逻辑耦合。

修复后的完整代码 #

const Tables = ({ cat, filters, operator }) => {
  const [tables, setTables] = useState([]);
  const [filteredTables, setFilteredTables] = useState([]);

  // 仅当分类切换时请求数据
  useEffect(() => {
    const getTables = async () => {
      try {
        const res = await axios.get(
          cat
            ? `http://localhost:5000/api/tables?gameType=${cat}`
            : `http://localhost:5000/api/tables`
        );
        setTables(res.data);
      } catch (err) {
        console.log(err);
      }
    };
    getTables();
  }, [cat]);

  // 基于表格数据、筛选条件更新过滤后的表格
  useEffect(() => {
    let result = [...tables];
    // 这里添加你的过滤逻辑，示例：
    // if (filters?.someCondition) result = result.filter(table => ...);
    // if (operator) result = result.filter(table => ...);
    setFilteredTables(result);
  }, [tables, filters, operator]);

  // 渲染逻辑
  return (
    <div>
      {(filteredTables.length > 0 ? filteredTables : tables).map(table => (
        <div key={table.id}>
          {table.isLive ?  
            <TableNameLive>{table.name}</TableNameLive> 
            :
            <TableNameDown>Stream Is Down for {table.name}</TableNameDown> 
          }
        </div>
      ))}
    </div>
  );
};

关键说明 #

• 组件会在tables更新时自动重渲染，视图会根据每条table的isLive字段自动切换展示状态，完全不需要forceUpdate。
• 过滤逻辑和数据请求逻辑分离，代码更清晰，且仅在依赖项变化时触发更新，避免无效重渲染。
• 彻底消除了无限循环的根源，解决应用故障问题。

内容的提问来源于stack exchange，提问作者Nico Muscat