react.js에 동적 데이터 통합

Question

안녕하세요 저는 동적으로 만들어야하는 반응으로 만든 카드를 가지고 있습니다. 하나의 구성 요소 만 만들었지 만 여러 데이터를 가지고 있으므로 보내는 데이터와 곱해집니다.

function App() {
  const [open, setOpen] = useState(false);

  const trigger = useRef(null);

  useEffect(() => {
    if (trigger.current) {
      trigger.current.style.transition = "0.35s";
    }
  }, [trigger]);

  function toggleOpen() {
    if (trigger.current) {
      setOpen((open) => !open);
      if (open) {
        trigger.current.style.webkitTransform = "rotate(0deg)";
      } else {
        trigger.current.style.webkitTransform = "rotate(180deg)";
      }
    }
  }
  const [metadata, setMetadata] = useState([]);
  const data = response.json();
  setMetadata(data);

  return (
    <div className="w-full ">
      <Menu />
      <div className="w-full flex justify-center px-4 py-3">
        <div className="flex w-3/12 px-2 items-center">
          <div className="w-24 p-2 bg-gray-300 mr-4 rounded">
            <img src={logo} className="" alt="" />
          </div>
          <div className="flex flex-col justify-center ">
            <p className="font-semibold my-0">{name}</p>
            <p className="text-xs my-0">
              {address}
            </p>
          </div>
        </div>
        <div className="flex w-1/6 justify-center items-center px-2">
          <div className="w-4/5 h-10 bg-green-600 rounded text-white font-bold flex justify-center items-center">
            <p className="my-0 text-lg">{percentage}</p>
          </div>
        </div>
        <div className="flex w-1/12 justify-center">
          <Chart />
        </div>
        <div className="flex  w-1/6 justify-center items-center font-semibold">
          <p className="my-0 text-lg">{visits}</p>
        </div>
        <div className="flex justify-center items-center font-semibold w-1/6">
          <p className="my-0 text-lg">{conglomerations} Alertas</p>
        </div>
        <div className="flex justify-center items-center font-semibold w-1/6 ">
          <p className="my-0 text-lg">{occupancy} Alertas</p>
        </div>
        <div className="card flex justify-center items-center w-1/6">
          <Button className="mr-3">Analytics</Button>
          <Button>Alerts</Button>
        </div>
        <div className="w-1/12 flex justify-center items-center">
          <span
            ref={trigger}
            onClick={toggleOpen}
            className=" w-4/12 flex justify-center items-center"
          >
            <BsChevronUp className=" text-2xl" />
          </span>
        </div>
      </div>
      <Info open={open} />
    </div>
  );
}

export default App;

여기에 카드의 코드를 보여줍니다. 이것은 아래의 모든 Menu데이터를 제가 가지고있는 데이터와 곱해야합니다.

[
{
    "name": "Samantha White",
    "id": "484567489sda",
    "address": "4116 Barton Creek Boulevard Austin, TX 78735 USA",
    "logo": "https://sssssss.s3.amazonaws.com/ssss/express.png",
    "occupancy": {
      "capacity": 150,
      "occupancy": 0,
      "percentage": 0
    },
    "alerts": {
      "conglomerations": 0,
      "occupancy": 0
    },
    "visits": 2721
  },
  {
    "name": "Jacqueline Wells",
    "id": "sdasdx45616a4dsa5",
    "address": "s15035 Highview Road Grand Junction, CO 81504 USA",
    "store_logo": "ssssss.s3.amazonaws.com/ssss/lider.png",
    "occupancy": {
      "capacity": 150,
      "occupancy": 0,
      "percentage": 0
    },
    "alerts": {
      "conglomerations": 0,
      "occupancy": 0
    },
    "visits": 2069
  }
]

지금은 내가 넣은 것과 동일한 데이터가 포함 된 .text 만 전송했습니다. 누군가가 해당 데이터를 내 카드에 통합하고 전송 한 모든 데이터를 곱하도록 도와 줄 수 있다면 많이 알지 못합니다. 더 이상 레이아웃이 아니라면 통합에 대해

Answer 1

JSON 파일에서 항목별로 카드를 만드는 방법을 요청하고 있다고 생각합니다. 그렇다면 카드 제작과 관련된 모든 것을 가져 와서 자체 구성 요소로 분리하는 것이 좋습니다. 그런 다음 앱 구성 요소로 다시 가져 와서 JSON 파일의 데이터를 매핑하고 루프 반복마다 카드 구성 요소를 만들 수 있습니다. 아래 코드 스 니펫과 유사합니다.

function App() {
  const [open, setOpen] = useState(false);

  const trigger = useRef(null);

  useEffect(() => {
    if (trigger.current) {
      trigger.current.style.transition = "0.35s";
    }
  }, [trigger]);

  function toggleOpen() {
    if (trigger.current) {
      setOpen((open) => !open);
      if (open) {
        trigger.current.style.webkitTransform = "rotate(0deg)";
      } else {
        trigger.current.style.webkitTransform = "rotate(180deg)";
      }
    }
  }
  const [metadata, setMetadata] = useState([]);
  const data = response.json();
  setMetadata(data);

  return (
    <div className="w-full ">
      <Menu />
        {data.map(idx => (
          <Card idx={idx.props} />
        ))}
      <Info open={open} />
    </div>
  );
}

export default App;

나는 그것이 완전한 대답이 아니라는 것을 알고 있지만 이것이 당신을 올바른 방향으로 이끌기를 바랍니다. 또한 map 메소드 (Map 메소드와 혼동하지 말 것)와 상태를 해제하는 방법을 읽어야합니다. 아래 문서에 링크하겠습니다 ....

지도: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

리프팅 상태 : https://reactjs.org/docs/lifting-state-up.html