如何设置初始状态作为道具与钩子的反应？

Question

I want to set state as props in react using hooks and I'm getting error: 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.

My code: First Component :

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}/>
    )
}

and the second component:

const ActualList = props => {
    const [items, setItems] = useState([{}])
    setItems(props.items)
    }
...

Answer 1

You can directly pass props to useState :

const ActualList = props => {
    const [items, setItems] = useState(props.items) // pass props.items as an initial state
    }

Answer 2

You are calling setItem in every render. Each time you change a state value, your component will be re-rendered, which will cause another state change, another re-render....

You should conditionally call setItems

Answer 3

So I eventually figured out how to do this, in case someone needs it here is the code :

const [items, setItems] = useState([{}]);
useEffect(() => setItems(props.items), [props])