Nuevo y aprendiendo a reaccionar. Tengo un archivo de datos que estoy leyendo para representar el componente de Tarjeta para cada elemento. En este momento, solo se muestra una tarjeta sin nada (una tarjeta en el estado inicial). ¿Cómo renderizo múltiples componentes al pasar por las propiedades de un archivo de datos?

Card.js

import React from 'react';
import * as d3 from "d3";
import data from './../data/data.csv';

class Card extends React.Component {
    constructor(){
        super();
        this.state={
            text:[],
        }
    }
    componentDidMount() {
        d3.csv(data)
            .then(function(data){
                console.log(data)
                let text = data.forEach((item)=>{
                    console.log(item)
                    return(
                        <div key={item.key}>
                        <h1>{item.quote}</h1>
                        </div>
                    )
                })
                this.setState({text:text});
                console.log(this.state.text);
            })
            .catch(function(error){

            })
    }

    render() {
        return(
            <div className='card'>
                {this.state.text}
            </div>
        )

    }
}

export default Card

index.js

import Card from './components/Card'

ReactDOM.render(<Card />, document.getElementById('root'));
0
Emily Chu 31 dic. 2019 a las 05:06

2 respuestas

La mejor respuesta

Responder: (Encontré una buena explicación aquí: https://icevanila.com/question/cannot-update-state-in-react-after-using-d3csv-to-load-data)

class Card extends React.Component {
  state = {
    data: []
  };

  componentDidMount() {
    const self = this;

    d3.csv(data).then(function(data) {
      self.setState({ data: data });
    });

    function callback(data) {
      this.setState({ data: data });
    }

    d3.csv(data).then(callback.bind(this));
  }

  render() {
    return (
      <div>
        {this.state.data.map(item => (
          <div className="card" key={item.key}>
            <h1>{item.quote}</h1>
          </div>
        ))}
      </div>
    );
  }
}
0
Emily Chu 31 dic. 2019 a las 03:41

Sugeriría almacenar la respuesta en un estado y luego representar los elementos con un map, algo así como:

constructor(){
  ...
  this.state = {
    data:[],
  }
}

componentDidMount() {
  ...
  .then(data => {
    this.setState({
      data,
    })
  })
}


render() {
  return (
    <div>
      {this.state.data.map(item) => (
        <div className='card' key={item.key}>
          <h1>{item.quote}</h1>
         </div>
      )}
    </div>
  )
}

0
albert 31 dic. 2019 a las 08:48