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

Question

您好，我想提供有关学校的信息并上传学校/课程的图片

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

由于地图功能只允许一个项目，我如何访问这两条信息来呈现组件？

反应

    useEffect(() => {
        async function requestSchools() {
            await axios.get("http://localhost:4000/api/getschool").then(response => {
                console.log(response.data)
                setSchools(response.data.rows)
            })

            await axios.get("http://localhost:4000/api/getschoolimages").then(response => {
                console.log(response.data)
                setImageKey(response.data.Contents)
            })
        }
        requestSchools();

        let doubleArr = [[], []]
        doubleArr[0].push(schools)
        doubleArr[1].push(imageKey)

        console.log('doubleArr', doubleArr)

        setSchools(doubleArr);

        return schools
    }, []);

    console.log('schools Correct', schools)


    //console.log(schools)


    const renderSchools = (school, index) => {
        return (
            <div>
                <InfoCard
                    key={index}
                    id={index}
                    name={school.name}
                    about={school.about}
                    location={school.location}
                    admission={school.admission}
                    identifier={index + 1}
                    url={imageKey[index]}

                />
            </div>

        )
    }

    return (
        <div>
            <Link to="/additem">
                <button className="ret_btn">Create</button>
            </Link>
            <div>{schools.map(renderSchools)}</div>
        </div>

    )

后台

schoolRouter.get('/getschool', async function (req, res) {
    try {
        const allschools = await pool.query(`SELECT * FROM school`);
        console.log('allschools', allschools.rows)
        const imageKeys = s3.listObjects(params, function (err, data) {
            if (err) console.log('error', err, err.stack); // an error occurred
            else console.log(data);
        })
        res.json(allschools)
    } catch (err) {
        console.error(err.message)
    }

})




schoolRouter.get('/getschoolimages', async function (req, res) {
    try {
        //console.log('allschools', allschools.rows)
        const imageKeys = s3.listObjects(params, function (err, data) {
            if (err) console.log('error', err, err.stack); // an error occurred
            else res.send(data);
        })
        //res.json(allschools)
    } catch (err) {
        console.error(err.message)
    }

})

信息卡

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

Answer 1

我会将image 添加为school 对象的属性，例如：

// 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。

Answer 2

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

并更改您的异步功能

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)

测试一下，告诉我结果如何