将数组映射到功能组件中

Question

function TypeArticleOne(props) {
let apiData = props.apiData;
const [ therapists, setTherapists ] = useState(apiData.topProfiles.therapists);
const [speciality, setSpeciality]= useState('ABA');
const [pageLoading, setPageLoading]= useState(true);

const topProfilesUrl = 'therapists/top/profiles'

useEffect(() => {
    console.log(speciality);
    getTopTherapists();
    window.scrollTo(0, 0);

}, []);

const getTopTherapists = () => {
    setPageLoading(true);
    loadTopTherapists();

};

const loadTopTherapists = () => {
    console.log("second");
    props.actions.reqGetTherapistsTopProfiles({
        body: {},
        headers: null,
        resource: `${topProfilesUrl}`
    })
};

useEffect(() => {

    if (apiData.topProfiles && apiData.topProfiles.success) {
        const therapistsLoad = apiData.topProfiles.therapists;
        setPageLoading(false);
        setTherapists([therapists].concat(therapistsLoad));
    }
    }, []);

如何在功能组件中映射数组？我想从上面的功能组件映射治疗师数组。我从数据库中以阵列的形式呼叫治疗师，我需要将其映射到功能组件内部的卡片中。

const renderTherapists = (props) => {
    const items = props.therapists.map( (t, idx) => (
        <TherapistCard therapist={t} key={idx} />
    ))

    return (
        <div ref={0} className="therapist-list">
            { items }
        </div>
    )
}

Answer 1

EDIT：您可能不需要React Fragment，因为您已经有注释中指出的内容。可能在destructuring上的观点可能仍然有帮助。

原始：

您可能需要将数组包装在React Fragment（<>{array}</>）中。这是必需的，因为您不能直接返回组件数组。

也不确定therapist对象的结构，但是如果要destruct，则它应该是({t, idx}) =>而不是(t, idx) =>（添加花括号）。

const renderTherapists = (props) => {
    const items = props.therapists.map( ({t, idx}) => (
        <TherapistCard therapist={t} key={idx} />
    ))

    return (
        <div ref={0} className="therapist-list">
            <>
               { items }
            </>
        </div>
    )
}

这是用于React 16.2.0和更高版本。在此处查看博客文章：https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html