使用React钩子加载效果

时间:2019-04-02 00:21:50

标签: javascript reactjs react-hooks

我正在努力使用react上的钩子来实现加载。 我可以使用componentDidMount来做到这一点,但是此应用程序使用的是Hoocks。 我创建状态和changestate,但是我无法在html上设置和使用它。 这是我的代码:

首先,我向axios和async / await发送了获取请求

const fetchContent = async content => {
    const data = []

    for await (const item of content) {
            const info = await axios.get(
                `url/id`
            )
                data.push({ componentDisplay: item.title });
       }
    return data
}

然后我称之为usseEffect

const ContentGroups = ({ content , ads}) => {
    const [contentResult, setResult] = useState([])

    const [contentLoading, changeCondition] = useState(true)

    const change = () => {
       changeCondition(false) 
   }

    useEffect(
        () => {
            fetchContent(content).then(data =>  setResult(data)
            change() 
        },
        [content]
    )
    return (

        <React.Fragment>
            { contentLoading ? <Loading /> : <Conteiner> } // always show me the container, although contentLoading innitial state is true..
        </div>

        </React.Fragment>
    )
}

0 个答案:

没有答案