如何在 React.js 中渲染之前初始化数据

Question

很抱歉我是 React 的初学者。我尝试使用 rechart 库绘制图表。

首先，我使用 API 从服务器获取数据并将其作为 props 传递给子组件。如果我直接在 render() 中使用 this.props.selectablefields 那么它工作得很好。但是点击图例标签的时候需要实现一些功能

因此我通过该数据设置状态并在 render() 中使用该状态。但是这个状态在第一次（第一次加载）时是空的。如果我在没有任何修复的情况下重新保存我的代码，那么这是可行的。（不是刷新..）这是我的代码。

export default class AnalysLineChart extends Component {

  constructor(props){
    super(props);
    this.selectBar = this.selectBar.bind(this);
    this.state = {
      labels: this.props.selectablefields
    }
  }

  selectBar(event) {
    //do something......
  }

  render() {
    return (
      <LineChart width={300} height={250} data={this.props.data}>
        <XAxis dataKey="date"/>
        <YAxis/>
        <Legend onClick={this.selectBar} />
        {
          //this code is work well but can't implement legend click functions
          //this.props.selectablefields.map((label, index)) => (   
          this.state.labels.map((label, index) => (
            <Line key={index} type="monotone" dataKey={label.key}  stroke={label.color} />
          ))
        }
      </LineChart>
    );
  }
}

谁能帮帮我？

注意：当我点击图例标签时，它会根据点击的图例显示和隐藏图表。

selectBar函数是这样的（不过这在本题中并不重要）

selectBar(event) {
    let updatedLabels = [];
    for (let i = 0; i < this.state.labels.length; i++) {
      let label = this.state.labels[i];
      
      if (label.key != event.dataKey) {
        updatedLabels.push(label);
      } else {
        if (/\s/.test(label.key)) {
          let newLabel = { key: label.key.trim(), color: label.color };
          updatedLabels.push(newLabel);
        }
        else {
          let newLabel = { key: label.key + " ", color: label.color };
          updatedLabels.push(newLabel);
        }
      }
    }
    this.setState({
      labels: updatedLabels
    });
  }

图表看起来像这样。

这是点击CPA图例后隐藏CPA图表时的图片。

Answer 1

我认为您对问题的描述不够清楚。

通常你会做的就是你所做的映射 this.props.selectablefields 因为将该道具保存到状态中似乎有点矫枉过正.....

点击Legend组件你到底想实现什么？

Answer 2

终于，我解决了这个问题。也许这是因为 setState 函数异步运行。我像这样修复了我的代码并且运行良好。

export default class AnalysLineChart extends Component {

  constructor(props){
    super(props);
    this.selectBar = this.selectBar.bind(this);
    this.state = {
      labels: []
    }
  }

  selectBar(event) {
    //do something......
  }

  componentDidMount(){
      this.setState({
          labels: this.props.selectablefields
      });
  }

  render() {
    return (
      <LineChart width={300} height={250} data={this.props.data}>
        <XAxis dataKey="date"/>
        <YAxis/>
        <Legend onClick={this.selectBar} />
        {  
          this.state.labels.map((label, index) => (
            <Line key={index} type="monotone" dataKey={label.key}  stroke={label.color} />
          ))
        }
      </LineChart>
    );
  }
}

如何在 React.js 中渲染之前初始化数据

How to initialize data before rendering in React.js

reactjs

recharts