ReactJs 中带有承诺和状态变量的无限循环答案

【问题标题】：Infinity Loop with promises and state variables in ReactJsReactJs 中带有承诺和状态变量的无限循环
【发布时间】：2021-02-15 15:25:35
【问题描述】：

我的反应组件在无限循环中多次渲染。我错过了什么？

这是我的代码。

const DocViewer = ({ title, closeModal }) => {

    const [docsSimilares, setDocsSimilares] = useState([]);
    const baseUrl = '/docs'

    async function similares() {
        return await axios.get(`${baseUrl}/${title}`).then(data => setDocsSimilares(data.data.body.hits.hits[0]._source.documentos_similares))
    }
    
    similares().then(console.log(docsSimilares))

    return (
        <div class="row">
            <div class="column pdf">
                <h1>{title}</h1> 
                <PDFViewer url={sFileNameDemo} />
            </div>
            <div class="column semelhantes">
                <button onClick={closeModal} >Fechar</button>
                <p>{docsSimilares.map(doc => (
                    <div>
                        <p>{doc}</p>
                        <img alt={doc} src={doc} width="100%" />
                    </div>
                ))}</p>             
            </div>
        </div>
    );
}

export default DocViewer

【问题讨论】：

张贴整页，但我已经看到了问题
.then(console.log(docsSimilares)) 不等待承诺解决，它只是立即调用console.log！
这能回答你的问题吗？ what is right way to do API call in react js?

标签： javascript reactjs

【解决方案1】：

这段代码解决了我的问题：

    async function similares() {
    const simDocs = await axios.get(`${baseUrl}/${title}`).then(data => (data.data.body.hits.hits[0]._source.documentos_similares))
    setDocsSimilares(simDocs)
}

useEffect(() => {
                    similares().then(data => console.log(data))
                },[]);

【讨论】：

【解决方案2】：

如果你使用钩子你需要了解useEffect

useEffect(() => similares().then(console.log(docsSimilares)),[])

方括号是您添加依赖项的地方，如果没有依赖项，它将仅在初始化“挂载”时运行，它与 componentDidMount() 相同，因此它只会在加载时触发 async 请求。

【讨论】：

【解决方案3】：

当您调用 similares() 函数时，您正在设置调用 setDocsSimilares 时的状态。通过设置状态，您触发重新渲染，当您触发重新渲染时，它再次调用您的 similares() 函数，这会改变状态...您明白了：)

只需在功能组件内部调用similares() - 它会在每次重新渲染时执行。

你不能像你那样简单地调用similares()。我认为您想要实现的是在第一个组件挂载时获取数据，因此您应该使用带有空数组的 useEffect 作为第二个参数，如下所示：

useEffect(() => similares().then(console.log(docsSimilares)),[])

【讨论】：