当前位置: 首页 > 知识库问答 >
问题:

反作用钩USESTEAT阵列

鲁华皓
2023-03-14

这里面有什么问题吗?

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

共有1个答案

令狐良骏
2023-03-14

您不应该在呈现函数中设置状态(或执行任何带有副作用的其他操作)。使用钩子时,可以为此使用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);

它在一个代码沙箱里。

 类似资料:
  • 我正在使用钩子,但我得到了这个错误 第25行:React Hook“React.usestate”在函数“contact”中被称为“contact”,它既不是React函数组件也不是自定义React Hook函数React-hooks/rules of-hooks“第26行:React Hook”React.usestate“在函数”contact“中被称为”contact“,它既不是React函

  • 我有一个函数,它运行验证并根据检查结果设置状态变量。我需要通过API调用传递要上传的变量。 我的问题是状态变量没有更新,当我需要在api调用中传递更新的变量时,状态变量正在以初始状态(null)传递。 我该如何着手解决这个问题? 现行代码 更新的代码正在运行

  • 它几乎添加了一个对象,该对象包含来自主窗体的子窗体的值。 这是我用作按钮的函数的函数。 这将一个新对象添加到一个名为的状态,该状态是一个对象数组。 提前谢了。

  • 我通常使用getBoundingClientRect()。宽度当开发一个Swiper组件使用反应挂钩,但在一些例子getBoundingClientRect()。宽度返回0。 我在useEffect函数中使用了setTimeout,效果很好; 下面是简单的swiper代码演示: 简单swiper演示代码

  • 是否有一种内置的方法来使用proptypes来确保传递给组件的对象数组实际上是特定形状的对象数组? 也许是这样的? 我是不是漏了什么特别明显的东西?看来这会很受欢迎。

  • 我写一些模块为PrestaShop 1.7。但是我有一个新的钩子的问题。 我注册hook,然后给他写方法。 有人知道我的代码哪里出错了,我在1.6中使用了这个功能,一切都很好,但在1.7中却没有。如果我的问题含糊不清,我很抱歉,但我的研究以失败告终。 感谢所有的帮助!