return 如何在 React 中分别使用父子组件？

Question

我有一个 GetData 组件，我可以在其中进行 API 调用。然后我将数据作为 props 转发给将使用数据的 graph 组件。在应用程序中，我然后 return GetData 组件来呈现图形。问题是 两个图现在合并为一个组件。我想把它们分开，这样我就可以给两个组件一个自己的框，并在每个组件旁边放一个按钮框。

有没有办法分别处理这些组件，以便为两个图形提供单独的容器并在它们旁边放置按钮组件？

这是我的代码：

获取数据：

import React, { useState, useEffect, Fragment } from "react";
import axios from "axios";
import GraphChart from "../components/GraphChart";
import BarChart from "../components/BarChart";

const config = {
  "Content-Type": "application/json",
  Accept: "application/json",
};

const GetData = () => {
  const [arrayFlow, setArrayFlow] = useState([]);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(async () => {
    const { data } = await axios({
      url: "http://192.168.170./*",
      method: "GET",
      data: null,
      withCredentials: true,
      headers: config,
    });
    console.log(data);

    const newData = data.value.map((d) => {
      const idNumber = d._idNumber;
      const startDate =
        d.startDate;
      const endDate =
        d._endDate;
      return {
        idNumber,
        startDate,
        endDate,
      };
    });
    setArrayFlow(newData);
  }, []);

  return (
    <>
      <GraphChart flow={arrayFlow} />
      <BarChart flow={arrayFlow} />
    </>
  );
};
export default GetData;

App.js:

import "./App.css";
import React from "react";
import GetData from './apiData/GetData'
import { Button } from "./components/button/Button";
import GraphChart from "./components/GraphChart";

const App = () => {
  
  return (
    <div className="app">
      <div className="example">
        <div className="graph-box">
          <div id="wrapper">
            <GraphChart />
          </div>
          <div className="side-bar">
            <Button>Sort</Button>
          </div>
        </div>
        <div className="graph-box">
          <div id="wrapper">
            <GetData />
          </div>
          <div className="side-bar">
            <Button>Sort</Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

图表，去除杂乱：

import React, { useEffect, useState } from "react";
import Chart from "react-apexcharts";
import _ from "lodash";
import { format, parseISO } from "date-fns";

const GraphChart = ({ instroom }) => {
  const [category, setCategory] = useState([]);
  const [data, setData] = useState([]);

  useEffect(() => {
    let series = [];
    let categories = [];
    let orderedFlow = _.orderBy(
      flow,
      ["startDate"],
      ["asc", "desc"]
    );
    for (let i = 0; i < orderedFlow.length; i++) {
      series.push(orderedFlow[i].idNumber);
      categories = categories.concat(
        format(
          parseISO(orderedFlow[i].startDate),
          "dd MMM YYY"
        )
      );
    }
    setCategory(categories);
    setData(series);
  }, [flow]);

 return (
    <div>
      <Chart
        options={{
          chart: {
            id: "basic-graph",
            }}}
        series={[
          {
            name: "ID",
            data: data,
          },
        ]}
        type="area"
        width="1500"
        height="500"
      />
    </div>
  );
};

export default GraphChart;

Answer 1

为什么不创建 useGetData 挂钩，而是使用 <GetData/> 组件？

那个钩子将负责获取数据。您可以从 <Graphs/> 的父级调用它并向它们提供数据。

useGetData 代码看起来像这样：

useGetData.js

const useGetData = () => { // You can also pass some params to it
  const [data,setData] = useState(null);
  const [isLoading,setIsLoading] = useState(true);
  const [error,setError] = useState(null);

  useEffect(() => {
    // CALL AXIOS
    
    // ON SUCCESS
    // setData(data) and setIsLoading(false)

    // ON ERROR
    // setError(error) and setIsLoading(false)
  },[]);

  return {
    data,
    isLoading,
    error
  };

};

App.js

const { data, isLoading, error } = useGetdata();

return (
  isLoading ? <Spinner/>
  : error ? <Error/>
  : <Chart1 data={data}/> and <Chart2 data={data}/>
);

return 如何在 React 中分别使用父子组件？

How to use return a parent and child component separately in React?

javascript

css

reactjs

axios

react-hooks