Javascript 如何映射React组件，但有两个不同的信息源

嗨，我想提供有关学校的信息，并上传学校/项目的图片

我有不同状态的图像URL和信息，因为图像保存在S3上，而信息保存在postgres中。因此，我有两条不同的路线

由于映射函数只允许一个项目，如何访问这两条信息来渲染组件

反应

信息卡

import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../stylesheets/cardstyles.css';
import { BrowserRouter, Route, Switch, Link, Redirect } from 'react-router-dom';



const InfoCard = (props) => {
    const url = `https://dreamschools-bucket.s3.amazonaws.com/${props.url}`
    return (
        <div className="container spacer">
            <div className="row align-items-center gen-card">
                <div className="col-12 col-md-6"><img width="100%" alt="Grandfather with child" src={url} sizes="(max-width: 200x) 80vw, 200px" /></div>
                <div className="col-12 col-md-6 gen-card">
                    <h3>{props.name}</h3>
                    <p>{props.about}</p>


                    <Link to={{
                        pathname: `/allinfo/${props.identifier}`,
                        param1: {
                            name: props.name,
                            about: props.about,
                            location: props.location,
                            admission: props.admission,
                            id: props.identifier
                        }
                    }}>
                        <button className="btn btn-primary my-3 btn-block">More information</button>
                    </Link>

                    <Link to={{
                        pathname: `/edititem/${props.identifier}`,
                        param1: {
                            name: props.name,
                            about: props.about,
                            location: props.location,
                            admission: props.admission,
                            id: props.identifier
                        }
                    }}>
                        <button className="btn btn-primary my-3 btn-block">Edit</button>
                    </Link>

                    {/*  <a className="btn btn-primary my-3 btn-block" href="/contact/">Edit</a> */}

                </div>
            </div>
        </div>
    )
}


export default InfoCard

从“反应引导/按钮”导入按钮；
从“react引导/卡”导入卡；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“../stylesheets/cardstyles.css”；
从“react router dom”导入{BrowserRouter，Route，Switch，Link，Redirect}；
常量信息卡=（道具）=>{
常量url=`https://dreamschools-bucket.s3.amazonaws.com/${props.url}`
返回(
{props.name}
{props.about}

更多信息
编辑
{/*   */}
)
}
导出默认信息卡

我将添加

图像

作为

学校

对象的属性，类似于：

// it looks like you have the same order in both since I see you have `imageKey[idx]` in your example
const schoolsWithImage = schools.map((school, idx) => {...school, image: images[idx]})

setSchools(schoolsWithImage)

---

然后你可以在循环时执行

school.image

。

如果顺序正确，你可以使用索引作为键来获得正确的值，如果顺序不正确，你必须拥有一个共享标识符，最有效的方法是执行一个循环并合并相应的对象，或者，一种非常无效的方法是为地图中的每次迭代找到正确的图像，它会为您提供“更干净”的代码，但会导致地图每次迭代都有一个额外的循环。虽然第一个是多一点的代码，但更有效

并更改异步函数

let school = await axios.get("http://localhost:4000/api/getschool")

let schoolimages = await axios.get("http://localhost:4000/api/getschoolimages")
 setSchools(school.data.rows)
 setImageKey(schoolimages.data.Contents)

---

测试一下，然后告诉我情况如何

对不起，但是。。。确切地说，我得到了预期的错误声明或语句。。。是javascript中的扩展运算符。它获取后面提到的变量对象的所有元素，并将其分散到左侧指定的变量中。语法不正确，可能会导致错误。要从映射函数直接返回JavaScript对象，必须将其包装在括号内：const schoolsWithImage=schools.map（（school，idx）=>（{…school，image:images[idx]}））是的，抱歉，它缺少

（）

在对象周围顺序正确，确实使用过尝试将其传递到我的代码中，但当我传递索引时我一直未定义。I可能是错误的，但您不使用

然后使用
等待？更新了我的答案尝试一下，告诉我它是如何进行的，这将等待两个等待承诺在你设置状态之前被完全履行，这将确保两个状态都已定义
// it looks like you have the same order in both since I see you have `imageKey[idx]` in your example
const schoolsWithImage = schools.map((school, idx) => {...school, image: images[idx]})

setSchools(schoolsWithImage)

let school = await axios.get("http://localhost:4000/api/getschool")

let schoolimages = await axios.get("http://localhost:4000/api/getschoolimages")
 setSchools(school.data.rows)
 setImageKey(schoolimages.data.Contents)