时间戳

首页 > 解决方案 > 在组件之间传递数据 React-JS

javascript - 在组件之间传递数据 React-JS

问题描述

我在 React-JS 中的组件之间传递数据时遇到了问题。我已经在平台上提到了各种其他解决方案，但它们对我不起作用。

在我的父组件中，我正在调用一个 API 并将其设置为一个状态。下面是我的函数被渲染ComponentDidMount() 

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

我将值传递给在 D3 库中呈现图表可视化的子组件。通过在 render 中使用以下语句，可视化也在父组件中呈现，而仅在调用组件时才需要加载。

<ChordFinal value={this.props.data}/>

在子组件中，我这样称呼它。const data = this.props.value;将数据推送到控制台时出现未定义的错误。

我在哪里做错了？我提到了各种例子，但无法实现。我想在调用父组件时将数据传递给子组件而不加载可视化。

标签： javascriptreactjs

解决方案

好吧，显然您的数据在您尝试加载时不可用。

当您的子元素this.state.data在render()方法中接收时，您知道即使在您的请求完成之前也可以调用渲染ComponentDidMount()。

为了避免出现未定义的错误，您可以：

首先，在渲染孩子之前检查它。仅在数据存在时才渲染：

{ this.state.data && <ChordFinal value={this.state.data}/> }

或者在子组件中检查值，在使用它之前（例如，我假设数据是一个对象并将其设置为空。）

const data = this.props.value ? this.props.value : {};

我希望它有帮助！

更新

我明白了，请尝试将以下方法添加到父元素：

actualCallback(data) {    
    if(data.fulldata)
        this.setState({
            data: data.fulldata
        })
    else
        console.error("Empty response")
}

并且，更新importJSON如下：

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

在该render()方法中，您可以看到state.data每次呈现的内容：

render() {
    console.log(this.state.data)
    ...
}

推荐阅读