React使用select下拉选项时useState状态未更新问题求助

问题根因 #

• list状态仅在组件初始化时依赖初始levels计算生成，useState的初始值仅执行一次，后续levels更新后list不会自动重新计算，页面渲染依赖的数据源没有变化，因此不会触发重渲染。
• select组件未绑定value属性与levels状态关联，状态更新后下拉框的显示值也不会同步。

修复步骤 #

1. 添加useEffect监听levels和color的变化，状态变更时自动重新计算list：

import { useState, useEffect } from 'react'

function App() {
  const [color, setColor] = useState("");
  const [error, setError] = useState(false);
  const [levels, setLevels] = useState(10);
  const [list, setList] = useState(new Values('#245422').all(levels));

  // 新增副作用监听状态变化
  useEffect(() => {
    try {
      const currentColor = color || '#245422'
      const newColorList = new Values(currentColor).all(levels)
      setList(newColorList)
      setError(false)
    } catch (err) {
      setError(true)
    }
  }, [levels, color])

  const handleSubmit = (e) => {
    e.preventDefault();
    try {
      let colors = new Values(color).all(levels);
      setList(colors);
    } catch (error) {
      setError(true);
      console.log("please enter valid color");
    }
  };

2. 修改select组件代码，绑定value属性与levels关联，删除无效的default属性：

<select 
  name="variation" 
  id="variation" 
  value={levels}
  onChange={(e) => {
    const selectValue = parseInt(e.target.value)
    setLevels(selectValue)
  }}
>
  <option value="26">7</option>
  <option value="10">21</option>
  <option value="6">32</option>
  <option value="4">51</option>
  <option value='2'>101</option>
</select>

修改完成后，调整下拉选项时levels状态更新会触发useEffect重新计算list，页面就会正常重渲染。

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