ReactJS / Javascript: componentDidMount () и рендер - PullRequest
Новая
       8

ReactJS / Javascript: componentDidMount () и рендер

0 голосов
/ 25 августа 2018

enter image description here Журнал консоли внутри функции рендеринга показывает данные. console.log(this.props) для componentDidMount() не определено (да ???). Как это возможно? Я не понимаю, как async работает в React. 

class Graph extends React.Component {
  constructor(props) {
    super(props);

    this.state = {  startTime:this.props.startTime, 
                    endTime:this.props.endTime,
                    nodes:this.props.data
                  }
    //console.log('graph data:', this.props.data)
  }

  componentDidMount() {
   // console.log('nodes:', this.props.data)
    this.force = d3.forceSimulation(this.state.nodes)
      .force("charge",
        d3.forceManyBody()
          .strength(this.props.forceStrength)
      )
      .force("x", d3.forceX(this.props.width / 2))
      .force("y", d3.forceY(this.props.height / 2));

    this.force.on('tick', () => this.setState({data: this.props.data}));
    console.log('setState:', this.props.data)
  }

  componentWillUnmount() {
    this.force.stop();
  }

  render() {
   // console.log('graph datas:', this.props.data)
    return (

      <svg width={this.props.width} height={this.props.height}>
      {console.log('map data:', this.props.data)}
      {Object.keys(this.props.data).map((node, index) =>(
     <circle r={node.r} cx={node.x} cy={node.y} fill="red" key={index}/>
      ))}
      </svg>
    );
  }//render
}//Component

export default graphql(getObjectsQuery, 
  { options: (ownProps) => { 
    console.log(ownProps.startTime); 
    return ({ second: { startTime: ownProps.startTime,
                            endTime: ownProps.endTime
     } }) 
  } } )(Graph);

1 Ответ

0 голосов
/ 25 августа 2018

componentDidMount крючок вызывается синхронно, когда компонент смонтирован.Он не вызывается при повторном рендеринге.

При ссылка сообщает:

componentDidMount () вызывается сразу после монтирования компонента (вставки вдерево).Инициализация, которая требует DOM-узлов, должна быть здесь.Если вам нужно загрузить данные из удаленной конечной точки, это хорошее место для создания экземпляра сетевого запроса.

this.props.data в данный момент не определено.

Пока *Крючок 1015 * срабатывает при каждом повторном рендере.Вопрос не показывает, как используется компонент, но ожидается, что значение data в <Graph data={...} будет определено асинхронно, а console.log(this.props.data) в render отражает это.

...