Question

我在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;当数据被推送到控制台时，我收到了未定义的错误。

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

Answer 1

很明显，当您尝试加载数据时，您的数据显然不可用。

当您的子元素在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)
    ...
}

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

1 个答案: