Question

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

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

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

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

以下是我父组件的代码。

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）的函数，其中称为prop;

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

然后将

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

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

0 个答案: