从同一个外部链接连接 2 个不同的数组 - React hooks fetch

Question

我能够获取数据什么 url，但问题是 url 分为几个数组，我需要获取数据并连接它们。

例子：

{
  "array1": [
    { "data1": {"name": "Name", "phone": "Phone"}}
    ]  
  "array2" : [
    { "data2": { "color": "Color", "car": "Car" } }
   ]
}

数据挂钩：

const userInfo = "URL";
 const [userData, setUserData] = useState([]);
    useEffect(() => {
        getUserInfo();
    }, []);

    const getUserInfo = async () => {
        const response = await fetch(UserInfo);
        const jsonData = await response.json();
        setUserData(jsonData);
    };

获取数据：

{ userData.data && userData.array1.map((array1, index)  =>
        <li key={"index" + index}  
                    <h5>{array1.data1.name} </h5>
        </li>
)}

我需要将 array1 中的名称与 array2 中的颜色连接起来，但我找不到方法。

预期输出：数据列表

Answer 1

如果你能得到这两个数组，那么你可以用它来组合它们：

const getUserInfo = async () => {
  const response = await fetch(UserInfo);
  const jsonData = await response.json();
  
   // this assumes `jsonData` in an object with keys `array1` and `array2`
   // if this is not the case, change `jsonData` below to the location of
   // those two arrays
   
  const { array1, array2 } = jsonData;

  const combinedArray = array1.map(({ data1 }, i) => ({
    ...data1,
    ...array2[i].data2 // assumes there is always a corresponding index in array 2
  }));

  // combinedArray will look like [ { name: 'Name', phone: 'Phone', color: 'Color', car: 'Car' } ] 


  setUserData(combinedArray);
};
]