0
146
Vistas¿Cómo obtener datos de objetos y enviar una matriz en React?
Tengo un punto final que devuelve un objeto. El objeto es:
{
"id": "669f8",
"creation_date": "2022-01-13 10:33:06.046652+01:00",
"case_type": "Summary",
"process_types": "",
"case_id": "ad23423s",
"current_stage": "",
"current_stage_name": "",
"consolidation": "None",
"last_change_date": "2022-01-14 14:35:17.563449+01:00",
"status": 1,
"assign": "Yes"
} Quiero mostrarlo en mi proyecto de React. Primero quiero tomar campos de objetos y luego los valores.
Escribí este código:
class DetailsPage extends React.Component<DetailProps> {
async getData() {
const data = await Dependencies.backend.getList(this.props.url);
if (data) {
return data;
}
return [];
}
render() {
const data = this.getData()
const fields: string[][] = []
const test: any[] = []
data.then((val: any) =>
fields.push(Object.keys(val))
// console.log(val)
) .catch(err => console.log("There was an error:" + err))
console.log("testeststt")
console.log(fields)
return (
<div>
<h1>Hoi!</h1>
</div>
);
}
}
El console.log(fields) devuelve
[]
Y cuando abro la matriz se muestra
Pero no puedo obtener la fila 0.
¿Cómo puedo obtener y empujar otra matriz o algo así?
1 Respuestas
Responde la pregunta0
La razón de esto es que la función de render solo muestra la interfaz de usuario. No se supone que haga cosas asincrónicas. Dado que debe invocar la llamada API cuando se monta el componente, puede hacerlo en componentDidMount y cuando tenga data , actualícelos en el estado.
De esta forma, en el renderizado inicial, tendrá 0 elementos en los data . Cuando actualice el estado, volverá a representar el componente y luego tendrá elementos en sus data .
Puedes hacer algo como lo siguiente:
componentDidMount() {
this.getData()
}
async getData() {
const data = await Dependencies.backend.getList(this.props.url);
this.setState({ data: data ?? [] })
}
render() {
const { data } = this.state;
console.log(data)
}