React 钩子 useState 数组

Question

我尝试在此处寻找重置 useState 数组值，但找不到对数组值的任何引用。

尝试将下拉值从初始状态更改为 allowedState 值。我在这里使用钩子方法来设置值 setStateValues 。如果我评论那行代码，它会显示下拉菜单。我不明白为什么我不能使用 setStateValues 方法来重置状态变量值。

我收到以下错误：

太多的重新渲染。 React 限制渲染次数以防止无限循环

这里有什么问题吗？

     import React, { useState } from "react";
    import ReactDOM from "react-dom";

    const StateSelector = () => {
    const initialValue = [
    { id: 0,value: " --- Select a State ---" }];

      const allowedState = [
        { id: 1, value: "Alabama" },
        { id: 2, value: "Georgia" },
        { id: 3, value: "Tennessee" }
        ];

      const [stateOptions, setStateValues] = useState(initialValue);
      // initialValue.push(...allowedState);

      console.log(initialValue.length);

      setStateValues(allowedState); // Not sure why cannot I reset the state in here for an array.

         return (<div>
          <label>Select a State:</label>
          <select>
            {stateOptions.map((localState, index) => (
              <option key={localState.id}>{localState.value}</option>
            ))}
          </select>
        </div>   ); };

    const rootElement = document.getElementById("root");
    ReactDOM.render(<StateSelector />, rootElement);

原文由 shavi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不应该在渲染函数中设置状态（或做任何其他有副作用的事情）。使用钩子时，您可以为此使用 useEffect 。

以下版本有效：

 import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const StateSelector = () => {
  const initialValue = [
    { id: 0, value: " --- Select a State ---" }];

  const allowedState = [
    { id: 1, value: "Alabama" },
    { id: 2, value: "Georgia" },
    { id: 3, value: "Tennessee" }
  ];

  const [stateOptions, setStateValues] = useState(initialValue);
  // initialValue.push(...allowedState);

  console.log(initialValue.length);
  // ****** BEGINNING OF CHANGE ******
  useEffect(() => {
    // Should not ever set state during rendering, so do this in useEffect instead.
    setStateValues(allowedState);
  }, []);
  // ****** END OF CHANGE ******

  return (<div>
    <label>Select a State:</label>
    <select>
      {stateOptions.map((localState, index) => (
        <option key={localState.id}>{localState.value}</option>
      ))}
    </select>
  </div>);
};

const rootElement = document.getElementById("root");
ReactDOM.render(<StateSelector />, rootElement);

这里是代码沙箱。

我假设您希望最终从某个动态源加载状态列表（否则您可以直接使用 allowedState 而不使用 useState ）。如果是这样，加载列表的 api 调用也可以进入 useEffect 块内。

原文由 Ryan Cogswell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

尽量保持你的状态最小。无需存储

   const initialValue = [
    { id: 0,value: " --- Select a State ---" }];

作为状态。将永久与变化分开

const ALL_STATE_VALS = [
    { id: 0,value: " --- Select a State ---" }
    { id: 1, value: "Alabama" },
    { id: 2, value: "Georgia" },
    { id: 3, value: "Tennessee" }
];

然后你可以只存储 id 作为你的状态：

 const StateSelector = () =>{
  const [selectedStateOption, setselectedStateOption] = useState(0);

  return (
    <div>
      <label>Select a State:</label>
      <select>
        {ALL_STATE_VALS.map((option, index) => (
          <option key={option.id} selected={index===selectedStateOption}>{option.value}</option>
        ))}
      </select>
    </div>);
   )
}

原文由 Ben Carp 发布，翻译遵循 CC BY-SA 4.0 许可协议