构建 table 反应 table 反应 api

Question

早上好，同事们，我正在构建一个 table，其中包含使用 api 后的数据，问题是此数据不具有 [=28] 的正常结构=].

服务器给我的文件是这样的：

{
  "Sensor_Id": "1",
  "Temperature": "35.27",
  "Humidity": "61.4"
}

如你所见，它没有括号（[]），这就是为什么它在构建 table 时不读取变量的原因，这里我使用 api:


export function Sensores(props) {
  const [sensores, setSensores] = useState([]);

  const fetchSensores = async () => {
    const response = await axios
      .get("https://my-json-server.typicode.com/ijrios/prueba2/sensores")
      .catch((err) => console.log(err));

    if (response) {
      const sensores = "["+response.data+"]";

      console.log("Sensores: ", sensores);
      setSensores(sensores);
    }

  };

我在这里构建列：


const columns = useMemo(
    () => [
      {
        Header: "Id",
        accessor: "Sensor_Id",
      },
      {
        Header: "Temperatura",
        accessor: "Temperature",
      },
      {
        Header: "Humedad",
        accessor: "Humidity",
      },
    ],
    []
  );

  const DatoSensores = useMemo(() => [...sensores], [sensores]);

  const tableInstance = useTable(
    {
      columns: columns,
      data: DatoSensores,
    }
  );

由于到达的文件是具有不同结构的 json，它不会向 table 写入任何数据，我需要帮助才能读取数据并将其显示在屏幕，谢谢你。

Answer 1

const sensores = "["+response.data+"]";

这会生成一个 字符串 ，[ 位于 response.data

附近

React Tables 需要一个常规的 array 作为数据源，所以让我们做一个；

const sensores = [ response.data ];

构建 table 反应 table 反应 api

build table with react table with api

reactjs

api

rest