在功能组件中映射数组

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

编辑：你可能不需要 React 片段，因为你已经有一个 正如评论中指出的那样。可能解构的观点可能仍然有帮助。

源语言：

您可能需要将数组包装在React 片段(<>{array}</>(。这是必需的，因为您无法直接返回组件数组。

也不确定therapist对象的结构是什么，但如果你想解构它，那么它应该是({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