我尝试在此处寻找重置useState数组值，但找不到对数组值的任何引用。
试图将下拉值从初始状态更改为允许的状态值。我在这里使用钩方法使用setStateValues设置值。如果我评论该行的代码，它将显示下拉列表。我不明白为什么我不能使用setStateValues方法重置状态变量值。
我遇到以下错误：
重新租赁太多。反应限制了防止无限环
的渲染数量
这里有什么问题吗？
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);
，这里是在代码沙盒中。
我假设您想最终从某些动态源加载状态列表（否则，您只能直接使用allowedState而无需使用useState）。如果是这样，则加载列表的API呼叫也可以进入useEffect块内。
尝试保持状态最小。无需存储
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>);
)
}
以扩展瑞安的答案：
每当调用SetStateValues时，React重新呈现您的组件，这意味着StateSelector组件函数的功能正文将重新执行。
react文档：
setState（）将始终导致重新渲染，除非 showscomponentupdate（）返回false。
本质上，您正在设置状态：
setStateValues(allowedState);
引起重新渲染，然后导致函数执行，依此类推。因此，循环问题。
说明这一点，如果您设置了一个超时：
setTimeout(
() => setStateValues(allowedState),
1000
)
结束"重新订阅者过多的问题"。
在您的情况下，您正在处理副作用，该副作用在组件功能中使用UseEffect处理。您可以在这里阅读更多有关它的信息。
接受的答案显示了正确的setState方法，但不会导致功能良好的选择框。
import React, { useState } from "react";
import ReactDOM from "react-dom";
const initialValue = { id: 0,value: " --- Select a State ---" };
const options = [
{ id: 1, value: "Alabama" },
{ id: 2, value: "Georgia" },
{ id: 3, value: "Tennessee" }
];
const StateSelector = () => {
const [ selected, setSelected ] = useState(initialValue);
return (
<div>
<label>Select a State:</label>
<select value={selected}>
{selected === initialValue &&
<option disabled value={initialValue}>{initialValue.value}</option>}
{options.map((localState, index) => (
<option key={localState.id} value={localState}>
{localState.value}
</option>
))}
</select>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<StateSelector />, rootElement);
使用状态并不总是需要您只需做这个
let paymentList = [
{"id":249,"txnid":"2","fname":"Rigoberto"}, {"id":249,"txnid":"33","fname":"manuel"},]
然后，在我的情况下，在地图循环中使用您的数据只是一张桌子，我确定你们中的许多人都在寻找相同的桌子。这是您的使用方式。
<div className="card-body">
<div className="table-responsive">
<table className="table table-striped">
<thead>
<tr>
<th>Transaction ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
{
paymentList.map((payment, key) => (
<tr key={key}>
<td>{payment.txnid}</td>
<td>{payment.fname}</td>
</tr>
))
}
</tbody>
</table>
</div>
</div>
//get value
const valor1 = event.target.elements.valor1.value;
//add to value object
const todo = {
valor1,
}
//push to new value or your state
setValor(prevLista =>{
return prevLista.concat(todo)
})
}