Question

已经找到了解决这个看似简单的问题的解决方案，但对Node来说相对较新，还没有找到解决方案。

我需要在渲染之前在导入的Component上设置prop。 prop的值是动态的，并且基于API的响应。

根据我所读到的内容，这应该出现在我的保护伞的构造函数中，但是几乎没有问题：

1）当API设置prop值时，Component会抛出错误 2）我认为这是因为React尝试在API调用完成之前呈现组件

如果手动设置有效值，Component会无错误地呈现。

所以，想知道如何获取值并在Component渲染之前设置prop以避免错误。

我可以发布代码示例，但尝试了很多变体，我不确定它们是否有用。

Answer 1

如果我误解了这一点，请告诉我。

您有两个组件，即组件Parent和组件Child。
组件Parent从API获取信息，并将其发送到组件Child。
组件Child呈现取决于您Parent发送给它的内容

所以，我认为问题是Child没有等待API调用完成渲染。

如果我拨打API电话，我将不会立即获得相关信息。您可能想要处理Child没有道具的情况。为此，您可以像这样致电Child：

class Parent extends React.Component {

  // Make the request to the API and handle the response

  render(){
    //Set the result of the API call to state.itemFromApiCall
    return <div><Child item={this.state.itemFromApiCall} /></div>
  }
}

您的Child组件看起来像这样：

function Child (props){
  if(!props.item)
    return <span>Loading...</span>

  //Then you have your component as you had before
}

在第一次渲染时，Child不会崩溃，因为它知道prop.item可能是undefined。每当您实际获得API调用的值时，Child将按预期运行。

希望它有所帮助！

通过API在导入的组件上设置道具

1 个答案: