如何从对象数组中检索并生成 VictoryPie - ReactJS答案

【问题标题】：How to retrieve from an array of objects and generate VictoryPie - ReactJS如何从对象数组中检索并生成 VictoryPie - ReactJS
【发布时间】：2018-01-14 16:36:52
【问题描述】：

在下面的代码 sn-p 中，我可以在控制台中看到由 Project 对象数组组成的作业数组。每个项目都有 jobName 和 numberOfHighPriorityWarnings。（请看代码你就会明白我是如何将这些对象设置到数组中的）。

我想在 VictoryPie 1 中显示这些。每个 Project 对象 jobName 应设置为 x 并且 numberOfHighPriorityWarnings 应设置为 VictoryPie 中的 y 变量。我在这里假设我应该创建一个 ForEach 循环，该循环遍历 this.state.jobs 并检索它的 jobName 和 numberOfHighPriorityWarnings 然后动态创建 VictoryPie 数据。但是我是 React 的新手，如果你能告诉我怎么做，我会很感激。提前致谢！

render() {

    console.log(this.state.jobs);


    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Results</h1>
        </header>

        <VictoryPie 
          data={[
            { x: "job name here", y: numberOfHighPriorityWarning },
            { x: "job name here", y: numberOfHighPriorityWarning }
          ]}
        />    

      </div>
    );
  }

仅供参考，这是我将数据设置为结果数组的方式：

this.state.jobs.push(new Project(job, status, numberOfHighPriorityWarnings, numberOfNormalPriorityWarnings, numberOfLowPriorityWarnings));

这就是 console.log(this.state.jobs) 的样子，

1 https://formidable.com/open-source/victory/docs/victory-pie/

【问题讨论】：

如果您的 this.state.results 看起来像您作为数据传递的内容。然后你只需要像这个 data={this.state.results} 一样传递它。如果这不是您需要的，请给出结果结构，发布完整代码
请检查我已编辑的问题并输入准确信息、控制台输出等。

标签： javascript arrays reactjs foreach

【解决方案1】：

将数组转换为不同的数组时，map 函数非常有用。在您的情况下，您可以像这样使用它：

<VictoryPie data={this.state.jobs.map(function (job) {
    return {
      x : job.jobName,
      y : job.numberOfHighPriorityWarnings
    };
})} />

【讨论】：

我试过这个仍然 VictoryPie 在浏览器中不可见。它适用于模拟数据，但不适用于遍历数组的数据。

【解决方案2】：

阅读官方文档后，我发现如果我们将数据设置为直接状态，它不会触发渲染功能。它还可能导致各种生命周期问题。然后，正如文档中提到的那样，我采用了 Hammad Akhwand 的渲染方法并采用了以下方法并使其正常工作。

var jobs = this.state.jobs.slice()
jobs.push(new Project(job, status, numberOfHighPriorityWarnings, numberOfNormalPriorityWarnings, numberOfLowPriorityWarnings))
this.setState({ jobs: jobs })

【讨论】：