反应挂钩useState Array

小编典典

反应挂钩useState Array

reactjs

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

尝试将下拉值从初始状态更改为允许状态值。我在这里使用hooks方法来使用设置值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);

阅读 321

2020-07-22

共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块内。

2020-07-22