[英]How to set inital state as props in react with hooks?
我想使用钩子将状态设置为props,但出现错误: Too many re-renders. React limits the number of renders to prevent an infinite loop. ▶ 34 stack frames were collapsed.
Too many re-renders. React limits the number of renders to prevent an infinite loop. ▶ 34 stack frames were collapsed.
我的代码:第一个组件:
const List = () => {
const [items, setItems] = useState([{}])
useEffect(() => {
const fetchData = async () => {
const data = await fetch(
'http://localhost:5000/api',
);
const result = await data.json();
setItems(result);
};
fetchData();
}, []);
return (
<ActualList items={items}/>
)
}
第二部分:
const ActualList = props => {
const [items, setItems] = useState([{}])
setItems(props.items)
}
...
您可以直接将道具传递给useState
:
const ActualList = props => {
const [items, setItems] = useState(props.items) // pass props.items as an initial state
}
您正在每个渲染中调用setItem。 每次更改状态值时,组件将被重新渲染,这将导致另一个状态更改,另一个重新渲染。
您应该有条件地调用setItems
所以我最终想出了办法,以防万一有人需要,这里是代码:
const [items, setItems] = useState([{}]);
useEffect(() => setItems(props.items), [props])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.