react useEffect为什么会无限调用？

Question

const Home =()=>{

    const [keyword,setKeyword] = useState('man')
    const [list,setList]=useState([])
    const [loading,setLoading]=useState(true)
    const inputEl = useRef(null)

    // console.log(keyword)

    const List = ({keyword})=>{

        useEffect(()=>{
            fetch(`https://www.omdbapi.com/?s=${keyword}&apikey=4a3b711b`)
                .then(res=>res.json())
                .then(data=>{
                    setLoading(false)
                    setList(data.Search)
                    // console.log(data.Search)
                })
                .catch(err=>{alert(err)})
        },[keyword])


        if(loading==true){
            return (
                <div>
                    <p>loading...</p>
                </div>
            )
        }
        return (
            <div>
                <p>获取到了关于{keyword}的信息</p>
                {
                    list.map((item,index)=><li key={index}>{1}</li>)
                }
            </div>
        )
    }



    function handlePress(e){
        if(e.key==='Enter'){
            setKeyword(inputEl.current.value)
        }
    }



    return(
        <div>
            <h3>Search engine</h3>
            <div>
                <input ref={inputEl} type="text" onKeyPress={(e)=>handlePress(e)}/>
            </div>
            <List keyword={keyword}/>
        </div>
    )
};

export default Home;

Answer 1

把List组件放到外边去试试

Answer 2

正常的啊，userEffect 这个钩子函数就是在每次组件渲染时，都会调用一次，而且会先调用钩子函数的返回值反注册之前的逻辑，再执行当前的函数体。
如果是想componentDidMout的效果，第二个参数设置[]，如果未设置第二个参数，而且在内部改变了状态，就会一直重复渲染,可以看看官方文档