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

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(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>
    );
  }
}

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

render components from array by changing state

javascript

arrays

components

render

reactjs