Я передаю данные из родительского компонента в дочерний компонент через <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
Как получить данные, вызываемые в дочернем компоненте напрямую из родительского компонента, без перехода из родительского компонента?
EDIT:
Функция из дочернего компонента (Chord), в которой опора называется
importData(){
const newData = this.props.value;
}
const newData
затем передается на визуализацию. Если я загружаю компонент Chord непосредственно в консоль, я вижу пустой массив. Если аккорд перемещается из родительского компонента (основного), он работает нормально.