javascript - 从子组件访问数据而不渲染父组件React-js

Question

我正在通过<Route />. 这工作正常，我可以看到console.log()来自子组件的数据输出。但是，这只有在我先打开父组件然后导航到子组件时才能完美运行。

我已经从渲染方法将数据放到控制台，我在父组件的初始运行中看到，数据被推送到控制台两次，第一次为空，第二次为实际数据。

当我直接从子组件调用数据时，我在控制台中只看到一个为空的输出。我想直接从子组件访问数据，而不是通过父组件导航。

我曾尝试更改组件生命周期，但没有任何效果。

下面是我的父组件的代码。

class Main extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      data: []
    }
  }

  componentWillMount(){
    this.importJSON()
  }

  importJSON(){
    return fetch ("https://bitbucket.org/...")
    .then(response => response.json())
    .then(responseJson => {
      this.setState({
        data: responseJson.fulldata
       })       
     })
   }

   render(){
     console.log(this.state.data) //This renders twice in parent is rendered.
     return(
       <main>
        <Switch>
          <Route exact path='/' component={Home}/>
          <Route path='/Chord' render={()=><Chord value={this.state.data}/>}/>        
        </Switch>
      </main>
    )
  }
}
export default Main

如何在不从父组件导航的情况下直接从父组件调用子组件中的数据？

编辑： 来自调用道具的子组件（Chord）的函数

importData(){
const newData = this.props.value;
}

const newData然后传递给可视化。如果我直接在控制台中加载 Chord 组件，我会看到一个空数组。如果和弦是从父组件（主）导航的，那么它工作正常。

标签： javascriptreactjsreact-router