Javascript 基于React中的承诺呈现元素（Firebase存储）

作品：

render（）{
const storageRef=firebase.storage（）.ref（）；
const nice=Object.keys（this.state.photos）.map（（key）=>{
返回{key}；
});
返回(
{nice}
)

不起作用：

render() {

    const storageRef = firebase.storage().ref();


    const nice = Object.keys(this.state.photos).map((key) => {
        return <div>{key}</div>;        
    });


return(
    {nice}
)

render（）{
const storageRef=firebase.storage（）.ref（）；
const nice=Object.keys（this.state.photos）.map（（key）=>{
storageRef.child（'front.jpg'）.getDownloadURL（）.then（函数（url）{
返回；
)}
});
返回(
{nice}
)

---

。然后

的东西似乎破坏了React中的渲染。我可以看到

nice

在控制台中都是好的和正确的，但是在DOM中没有显示任何内容。代码的思想是将图像的名称存储在state中（它引用我们Firebase存储中的图像）然后在使用

getDownloadURL

获取URL后渲染每个图像。您需要在渲染函数中返回单个元素包装

应该如此

render() {

    const storageRef = firebase.storage().ref();


    const nice = Object.keys(this.state.photos).map((key) => {
        storageRef.child('front.jpg').getDownloadURL().then(function(url) {
            return <div><img src={url} /></div>;        
        )}
    });


return(
    {nice}
)

return（{photosArray}）

---

您还有一个输入错误，数组同时用作：photosArray和photosArray

您需要在渲染函数中返回单个元素包装器

应该如此

render() {

    const storageRef = firebase.storage().ref();


    const nice = Object.keys(this.state.photos).map((key) => {
        storageRef.child('front.jpg').getDownloadURL().then(function(url) {
            return <div><img src={url} /></div>;        
        )}
    });


return(
    {nice}
)

return（{photosArray}）

---

您还有一个输入错误，数组同时用作：photosArray和photosArray

承诺是异步的。上面的代码每次都将返回{nice}，因为当承诺等待实现时，将返回下一行代码，即return（{nice}），这将是未定义的。在渲染方法中加入承诺通常是不好的做法。事实上，理想情况下，您的整个组件将是一个纯函数（即它只是根据接收到的道具进行渲染，异步内容将在其他地方处理，如在redux thunk或saga中，但我们稍后将回到这一点）

处理组件内异步代码的正确方法是使用react。反过来，使用生命周期方法要求您将组件定义为扩展react.component的类（请参阅链接）。您将异步函数放在哪个生命周期方法（promise）中取决于何时需要运行异步代码。例如，如果只希望在首次呈现组件时运行代码，则可能需要使用“componentWillMount”方法，甚至只使用构造函数。例如，类似以下内容：

return (<div>{photosArray}</div>)

类MyComponent扩展了React.Component{ 建造师（道具）{ 此.state={ 照片URL:“” } storageRef.child（'front.jpg'）.getDownloadURL（）.then（函数（url）{ this.setState（{photoUrl:url}） )} } render（）{ if（this.state.photoUrl）{ 返回（） }否则{ return“”//在您实际拥有url之前，不会返回任何内容 } } } promise仅在组件首次呈现时运行一次。要获得更大的灵活性，请查看lifecycle方法。如果希望异步代码运行以响应用户交互，请定义自己的函数，该函数包含promise并在完成时更新状态。然后在html元素中，引用该函数，如so:

class MyComponent extends React.Component {
  constructor(props){
    this.state = {
      photoUrl: ''
    }
    storageRef.child('front.jpg').getDownloadURL().then(function(url) {
        this.setState({photoUrl: url})        
    )}
  }

  render(){
    if(this.state.photoUrl){
      return (<div><img src={this.state.url} /></div>)
    } else {
      return '' //will return nothing until you actually have a url
    }
  }
}

---

好的，回到我说的关于redux的内容。你现在可能不需要它，但当你继续沿着react开发的道路前进时，你肯定会想要它。根据你的标题，你说你正在使用Firebase作为你的商店，我猜你可能不完全理解redux商店的用途。它是一个状态管理解决方案。为什么你需要这个吗？例如，如果另一个组件需要你刚刚检索到的url怎么办？它也需要进行异步调用吗？你可以有一个更高级别的组件进行异步调用，并通过道具将url传递给它的子组件，但如果这对你的应用程序没有实际意义怎么办？此外，如果你的用户需要导航到另一个不存在该组件的页面，但该url也需要在另一个页面上？您需要再次获取它吗？对Firebase进行如此多的调用并不是真正有效的，所以如果我们只是将所有需要的东西放在与状态相关的位置（如“appIsBusy”标志）和数据（如我们正在跟踪的url）上，会怎么样我们在一个地方与所有人一起工作？那就是redux商店。redux thunk和redux sagas只是处理所有异步事情的方法（和其他事情，但现在不用担心）这可能以组件外部的方式发生在你的应用程序中。这意味着你的组件都可以是纯粹的函数，只需要根据给定的道具和渲染。它们本身不需要做任何异步操作，并且总是可以预测的。也就是说，我的建议是查看redux库（）并尝试将其与您的应用程序集成（您还需要react-redux库。以便更好地了解这方面的情况）。现在不要担心thunks或sagas，只需使用上面所示的生命周期方法处理组件中的异步内容。然后，当您处理完所有这些内容后，就可以开始研究thunks和sagas了。

承诺是异步的。上面的代码将返回{nice}每次都是因为在承诺等待实现时，下一行代码将被返回，即返回（{nice}），这将是未定义的。将承诺放在呈现方法中通常是不好的做法。事实上，理想情况下，整个组件将是一个纯函数（也就是说，它只是根据它接收到的道具进行渲染，异步内容在其他地方进行处理，比如在redux thunk或传奇中，但我们稍后会回到这一点

处理组件内异步代码的正确方法是使用react。反过来，使用生命周期方法需要将组件定义为扩展react.component的类（请参见链接）。哪个生命周期