使用api构建react表

Question

早上好，同事们，我正在构建一个表，其中包含从消费api后带来的数据，问题是该数据不具有json的正常结构。

服务器给我的文件是:

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

如您所见，它没有括号([])，这就是为什么它在构建表时不读取变量的原因，这里我使用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，它不向表中写入任何数据，我需要帮助才能读取数据并在屏幕上显示，谢谢。

Answer 1

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

生成一个字符串[在response.data附近

---

React Tables需要一个常规数组作为数据源，所以让我们创建一个;

const sensores = [ response.data ];