这里面有什么问题吗?
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);
您不应该在呈现函数中设置状态(或执行任何带有副作用的其他操作)。使用钩子时,可以为此使用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中却没有。如果我的问题含糊不清,我很抱歉,但我的研究以失败告终。 感谢所有的帮助!