arrays - 从另一个 api 端点映射数组并通过 React 子组件的 prop

Question

我需要将来自两个 API（即爱好和人员 API）的响应传递给我的子组件。所以我能够map()子组件并在列表中显示数据。

来自人员 api 的响应：

{[
0: {id: 01, name: {…}, familyName: {…}, phone: 0 …}
1: {id: 02, name: {…}, familyName: {…}, phone: 0 …}
2: {id: 03, name: {…}, familyName: {…}, phone: 0 …}
3: {id: 04, name: {…}, familyName: {…}, phone: 0 …}
4: {id: 05, name: {…}, familyName: {…}, phone: 0 …}
5: {id: 06, name: {…}, familyName: {…}, phone: 0 …}
6: {id: 07, name: {…}, familyName: {…}, phone: 0 …} 
]
} 

来自爱好 api 的响应：

{ data: {
  name: "Test name"
  hobbies: (2) [{…}, {…}]
  userId: "test"
  _id: "4767647478"
 }
}

组件：

const PersonList = () => {
  const [loading, setLoading] = useState(false);
  const [persons, setPersons] = useState<Person[]>([]);
  const [hobbies, setHobbies] = useState<Hobbies[]>([]);

  const urls = [
    "https://person-api",
    "https://hobbies-api",
  ];

  const getData = async () => {
    setLoading(true);
    const [result1, result2] = await Promise.all(
      urls.map((url) => fetch(url).then((res) => res.json()))
    );

    setLoading(false);
    setPersons(result1);
    setHobbies(result2);
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div>
      <div>
        {persons.map((person) => {
          return (
            <PersonCard
              key={person.id}
              name={person.name}
            />
          );
        })}
      </div>
    </div>
  );
};

export default PersonList;

上面的代码可以正常工作并呈现人员姓名列表。但是我如何通过我的子组件map()传递hobbies（来自不同的 api 响应）一个道具，例如爱好，如下所示？

 <PersonCard
  key={person.id}
  name={person.name}
  hobbies={hobby.name}
 />

标签： arraysreactjstypescriptreact-props