javascript - 如何在 JSX 中使用对象渲染数组？

Question

在我点击一个“人”后，我从 api 请求数据。我得到的数据将说明“车辆”，数据包括具有车辆“名称”和“型号”字段的对象。

const [车辆，setVehicles] = useState([]);

  useEffect(() => {
    setVehicles([]);
    const fetchVehicles = () => {
      let result = [];
      let personVehicle = person.vehicles;

      personVehicle?.map((el) => {
        return axios.get(el).then((response) => {
          result.push({ name: response.data.name, model: response.data.model });
          setVehicles(result);
        });
      });
    };
    fetchVehicles();
  }, [person]);

如何呈现此异步数据？我应该如何以正确的方式循环它？

我需要像这样得到它：

<p>Name: {name from state}</p>
<p>Model: {model from state}</p>

标签： javascriptarraysreactjsasynchronousstate

Answer 1

也许只是将您获取的数据添加到状态，然后将其作为 ul 映射？

import React from "react";

const App = () => {
  useEffect(() => {
    fetchVehicles();
  }, []);

  const fetchVehicles = () => {
    axios.get("/api/vehicles").then((res) => {
      const vehicles = res.data;
      vehicles &&
        vehicles.map((v) => {
          setVehicles([...vehicles, { name: v.name, model: v.model }]);
        });
    });
  };

  return (
    <div>
      {vehicles ? (
        <ul>
          {vehicles.map((v) => {
            return (
              <li>
                <p>{v.name}</p>
                <p>{v.model}</p>
              </li>
            );
          })}
        </ul>
      ) : (
        <p>no vehicles</p>
      )}
    </div>
  );
};

export default App;