在 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 文件中为每个项目创建一张卡片吗？ 如果是这样，我建议您将与制作卡片相关的所有内容都放在单独的组件中。 然后，您可以将其导入回您的 App 组件中，从您的 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