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

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

这是我的密码

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

constdocviewer=（{title，closeModal}）=>{
const[docsMilares，setdocsMilares]=useState（[]）；
常量baseUrl='/docs'
异步函数相似性（）{
return wait-awit-axios.get（`${baseUrl}/${title}`）。然后（data=>setdocssiliares（data.data.body.hits.hits[0]。\u source.documentos\u similares））
}
similares（）.then（console.log（docsSimilares））
返回(
{title}
粪便
{docsSimilares.map（doc=>(
{doc}

))}

);
}
导出默认DocViewer

调用

similares（）

函数时，您正在设置调用

setDocsSimilares

时的状态。 通过设置触发重新渲染的状态，当触发重新渲染时，它会再次调用

similares（）

函数，从而更改状态。。。你的想法是：）

只需在功能组件内部调用

similares（）

，它就会在每次重新渲染时执行

您不能像这样简单地调用similares（）。 我认为您试图实现的是在第一个组件装载时获取数据，因此您应该使用

useffect

和空数组作为第二个参数，如下所示：

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

---

当您调用

similares（）

函数时，您正在设置调用

setDocsSimilares

时的状态。 通过设置触发重新渲染的状态，当触发重新渲染时，它会再次调用

similares（）

函数，从而更改状态。。。你的想法是：）

只需在功能组件内部调用

similares（）

，它就会在每次重新渲染时执行

您不能像这样简单地调用similares（）。 我认为您试图实现的是在第一个组件装载时获取数据，因此您应该使用

useffect

和空数组作为第二个参数，如下所示：

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

---

如果您使用的是钩子，您需要了解

---

方括号是添加依赖项的地方，如果没有依赖项，它将只在初始化“装载”时运行，这与

componentDidMount（）

相同，因此它只会在加载时触发

异步

请求。

如果您使用的是钩子，您需要了解

---

方括号是添加依赖项的地方，如果没有依赖项，它将只在初始化“装载”时运行，这与

componentDidMount（）

相同，因此它只会在加载时触发

异步

请求。

此代码解决了我的问题：

    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))
                },[]);

---

此代码解决了我的问题：

    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))
                },[]);

---

发布整个页面，但我已经看到问题

。然后（console.log（docsSimilares））

不会等待承诺解决，它只会立即调用

console.log

！这回答了你的问题吗？发布整个页面，但我已经看到问题

。然后（console.log（docsSimilares））

不会等待承诺解决，它只会立即调用

console.log

！这回答了你的问题吗？