抱歉,如果这在文档中的某个地方很明显,但我试图等到在父组件上设置我的状态后再渲染子组件:
释义:
class Parent extends Component {
componentWillMount() {
firestack.database.ref()
.then((snapshot) => {
this.setState({myVal: snapshot.val})
})
}
render() {
// Renders before request finishes setting state,
// Child component receives an undefined val
return (
<ChildComponent
myVal={this.state.myVal}
/>
)
}
}
我的渲染在请求完成之前命中,因此我无法将新的 State 传递给子组件的构造函数。我怎样才能正确地做到这一点? 希望这对某些人来说是容易实现的目标。
最佳答案
首先,我建议将您的异步请求移至 componentDidMount
。不是强制性的,但这是生命周期中的一个更好的点。您的组件需要能够处理 myVal == undefined
无论如何。
然后,不要渲染子组件,直到 myVal
可用:
render() {
return (
<div>
{ this.state.myVal && <ChildComponent myVal={this.state.myVal} /> }
</div>
)
}
或者,渲染一个微调框:
render() {
return (
<div>
{ this.state.myVal
? <ChildComponent myVal={this.state.myVal} />
: <Spinner />
}
</div>
)
}
注意:
您不能使用
if
在 JSX 内部,所以这种不太合规的使用&&
需要保持语法紧凑。常见的模式。您可以拥有
this.state.isReady
bool 值而不是询问是否存在特定值。另一种常见模式。如果
ChildComponent
是您要渲染的唯一元素,您可能不需要<div />
包装器,但您通常出于某种原因这样做。
关于reactjs - React Native : make API request, 设置状态,然后渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44121504/