Javascript 通过更改状态从阵列渲染组件

新的学习和反应。我有一个正在读取的数据文件，以便为每个项目渲染卡组件。现在，只有一张没有任何内容的卡（一张处于初始状态）渲染。如何通过从数据文件传递属性来渲染多个组件

Card.js

从“React”导入React；
从“d3”导入*作为d3；
从“/../data/data.csv”导入数据；
类卡扩展了React.Component{
构造函数（）{
超级（）；
这个州={
案文：[]，
}
}
componentDidMount（）{
d3.csv（数据）
.then（功能（数据）{
console.log（数据）
让text=data.forEach（（项）=>{
console.log（项目）
返回(
{item.quote}
)
})
this.setState（{text:text}）；
log（this.state.text）；
})
.catch（函数（错误）{
})
}
render（）{
返回(
{this.state.text}
)
}
}
导出默认卡

index.js

从“./components/Card”导入卡
ReactDOM.render（，document.getElementById（'root'））；

我建议将响应存储到一个状态，然后使用

映射来呈现项目，类似于：

constructor（）{
...
此.state={
数据：[]，
}
}
componentDidMount（）{
...
。然后（数据=>{
这是我的国家({
数据，
})
})
}
render（）{
返回(
{此.state.data.map（项）=>(
{item.quote}
)}
)
}
回答：
（这里有一个很好的解释：）

类卡扩展React.Component{
状态={
数据：[]
};
componentDidMount（）{
const self=这个；
d3.csv（数据）。然后（函数（数据）{
self.setState（{data:data}）；
});
函数回调（数据）{
this.setState（{data:data}）；
}
d3.csv（data）.then（callback.bind（this））；
}
render（）{
返回(
{this.state.data.map（项=>(
{item.quote}
))}
);
}
}
状态似乎没有实际更新（状态仍处于初始状态）的问题似乎也在发生……我是否缺少componentDidMount中的某些内容，可能是将新值绑定到状态的时候……在上面的代码上，
console.log（data）
的输出是什么？[{key:“1”，引号：“some text”}，{key:“2”，quote:“更多文本”}…]在这里签出codesanbox，它给出了一个正确的想法，如何在执行componentDidMount（）{d3.csv（数据）时绕过“未捕获（承诺中）类型错误：无法读取未定义的属性'setState'。然后（函数（数据）{this.setState（{data: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>
    );
  }
}