[通过更改状态从数组中渲染组件

Question

[React入门和学习。我有一个正在读取的数据文件，以便呈现每个项目的Card组件。现在，只有一张没有任何内容的卡（初始状态的一张卡）会呈现。如何通过数据文件中的属性来呈现多个组件？

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'));

Answer 1

我建议将响应存储到一个状态，然后使用map渲染项目，例如：

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

componentDidMount() {
  ...
  .then(function(data){
    this.setState({
      data,
    })
  })
}


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

Answer 2

答案：（在这里找到了很好的解释：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>
    );
  }
}