使用选择和选项时状态不更新答案

【问题标题】：State not updating when using select and options使用选择和选项时状态不更新
【发布时间】：2021-09-08 00:51:48
【问题描述】：

对此还是有点新意。我有一个带有下拉选项的选择，并且正在尝试在列表选项更改时更新“级别”状态。当我手动更改级别状态时，它会重新渲染，但在使用 select 的 onChange 功能时不会。谢谢。

  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));
  

  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");
    }
  };
  
  return (
    <>
      <section className="container">
        <h3>color generator</h3>
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            value={color}
            onChange={(e) => setColor(e.target.value)}
            placeholder="#ff34sd"
            className={`${error ? "error" : null}`}
          />
          <button className="btn" type="submit">
            submit
          </button>
        </form>
        <div>
      <label htmlFor="variation" className="select-label">
        # of variations
      </label>
      <select name="variation" id="variation" onChange={(e) => {
        const selectValue = parseInt(e.target.value)
        setLevels(selectValue)
        console.log(selectValue)
      }}>
        <option value="26" default>7</option>
        <option value="10">21</option>
        <option value="6">32</option>
        <option value="4">51</option>
        <option value='2'>101</option>
      </select>

    </div>

【问题讨论】：

代码中的new Values 是什么？
对不起，我没有关注。在这种情况下我将如何使用 new 运算符？

标签： reactjs select options use-state

【解决方案1】：

感谢您的帮助，我发现我需要更新列表而不是关卡，如果这有意义，我就是这样做的。

<select name="variation" id="variation" onChange={(e) => {
        const selectValue = parseInt(e.target.value)
        setList(new Values(`${color}`).all(selectValue))
      }}>
        <option value="26" default>7</option>
        <option value="10">21</option>
        <option value="6">32</option>
        <option value="4">51</option>
        <option value='2'>101</option>
      </select>

【讨论】：

【解决方案2】：

我想，你忘了使用value属性：

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

【讨论】：

嗨，在选择时尝试了具有附加值的代码，但仍然没有重新渲染。谢谢
我检查过了，它工作正常。见codesandbox.io/s/distracted-wave-q97sn?file=/src/App.js
我同意您的代码很好。onChange 处理程序中的控制台日志并不表示您的组件状态是否正在更新。如果您查看此代码笔，您会注意到该值确实发生了变化如果您呈现值，则符合预期：codesandbox.io/s/vibrant-liskov-fxex5?file=/src/App.js
是的，我尝试创建一个新组件，它确实更新了级别值，但我希望级别也在列表 useState 中更新。也许我做错了什么。感谢您的帮助。