英文:
Fetching diferent servers at the same time to create a component
问题
I'm working on a modular system that makes sure it has access to the other servers on my front-end app. I'm fetching all of them inside a forEach loop and then trying to update the useState() just adding the "new component". What am I doing wrong?
In less words, trying to insert the new component at the end of the previously created ones.
const [dropdownItems, setdropdownItems] = useState([])
session.reachablePartner.forEach((serverPartner) => {
fetch(`http://${serverPartner.ipAddress}/api/isonline`).then((res) => {
setdropdownItems(...dropdownItems,
<DropDownItem
key={serverPartner.ipAddress}
onClick={() => {
window.location.replace(`http://${serverPartner.ipAddress}/`)
}}
>
{serverPartner.serverName}
</DropDownItem>
)
}).catch(() => {
console.log(serverPartner.serverName + " Is not reachable")
})
})
英文:
I'm working on a modular system that makes sure it has access to the other servers on my front end app. I'm fetching all of them inside a forEach loop and then trying to update the useState() just adding the "new component". What Am I doing wrong?
In less words, trying to insert the new component at the end of the previous created ones.
const [dropdownItems, setdropdownItems] = useState([])
session.reachablePartner.forEach((serverPartner)=>{
fetch(`http://${serverPartner.ipAddress}/api/isonline`).then((res)=>{
setdropdownItems(...dropdownItems,<DropDownItem
key={serverPartner.ipAddress}
onClick={() => {
window.location.replace(`http://${serverPartner.ipAddress}/`)
}}
>
{serverPartner.serverName}
</DropDownItem>)
}).catch(()=>{
console.log(serverPartner.serverName + " Is not reachable")
})
})
答案1
得分: 1
我现在已经让它工作了，以下是最终的代码，如果有人需要的话。
代码:
useEffect(() => {
(async() => {
const promises = session.reachablePartner.map((serverPartner) => {
return fetch(`http://${serverPartner.ipAddress}/api/isonline`).then(reply => reply).catch(err => console.log(err))
})
Promise.all(promises).then(result => {
const linkstoShow = session.reachablePartner.filter((link,index) => result[index])
setdropdownItems(linkstoShow.map(serverPartner => (
<DropDownItem
key={serverPartner.ipAddress}
onClick={() => {
window.location.replace(`http://${serverPartner.ipAddress}/`)
}}
>
{serverPartner.serverName}
</DropDownItem>
)))
})
})()
}, [])
英文:
I got it working now, here is the final code if some one needs it.
Code:
useEffect(()=>{
(async()=>{
const promises = session.reachablePartner.map((serverPartner)=>{
return fetch(`http://${serverPartner.ipAddress}/api/isonline`).then(reply=>reply).catch(err=>console.log(err))
})
Promise.all(promises).then(result=>{
const linkstoShow = session.reachablePartner.filter((link,index)=>result[index])
setdropdownItems(linkstoShow.map(serverPartner=>{
<DropDownItem
key={serverPartner.ipAddress}
onClick={() => {
window.location.replace(`http://${serverPartner.ipAddress}/`)
}}
>
{serverPartner.serverName}
</DropDownItem>
}))
})
})()
},[])
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论