人丁元素反应（火力地堡存储）

Question

作品：

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(function(url) { 
      return <div><img src={url} /></div>;   
     )} 
    }); 


return(
    {nice} 
) 

的.then东西似乎打破阵营渲染。我可以看到nice在控制台中都很好用，但DOM上没有任何内容。该代码的想法是将图像的名称存储在状态中（将图像引用到我们的Firebase存储中），然后在使用getDownloadURL获取URL后呈现每个图像。

Answer 1

承诺是异步的。上面的代码每次都会返回{nice}，因为当promise等待被实现时，下一行代码将被返回，这是return（{nice}），这将是未定义的。在你的渲染方法中承诺一般是不好的做法。事实上，你的整个组件应该是一个纯函数（也就是说，它只是基于它接收到的道具进行渲染，而异步的东西是在其他地方处理的，比如在redox或者saga中，但我们会回到

在组件中处理异步代码的正确方法是使用react的lifecycle methods。使用生命周期方法需要您将组件定义为扩展React.Component的类（请参阅链接）。把你的异步函数（promise）放到你需要异步代码运行的时候，例如，如果你只是想让代码在组件第一次渲染时运行，你可能想要使用“componentWillMount”方法，或者甚至只是例如，像这样的东西：

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 
    } 
    } 
} 

承诺将只运行一次，当组件第一次被渲染。要获得更多灵活性，请查看生命周期方法。如果您希望异步代码运行以响应用户交互，请定义自己的函数，该函数在完成时包含承诺和更新状态。然后在你的html元素中，引用那个函数就像这样：

<input ... onClick={this.myAsyncFn.bind(this)}/> 

好吧，回到我刚才提到的关于redux的问题。你现在可能不需要它，但是当你继续沿着这个反应发展的道路时，你肯定会想要它。根据你的标题，你说你使用Firebase作为你的商店，我猜你可能不完全了解REDX商店的用途。这是一种国家管理解决方案。你为什么需要这个？那么举个例子，如果另一个组件需要你刚才检索的那个url呢？它是否也必须进行异步调用？你可以有一个更高层次的组件，它可以进行异步调用，并通过道具传递给它的子节点，但是如果这对你的应用程序没有意义，那该怎么办？此外，如果您的用户需要导航到不存在该组件的不同页面，但该页面也需要在该其他页面上？你需要再次得到它吗？对Firebase进行如此多的调用并不是很有效，所以如果我们只是将所需的所有与我们的状态相关的东西（比如“appIsBusy”标志）和我们正在工作的数据（如我们正在跟踪的url）所有在一个地方？这是redux商店。Redux Thunk和Redux Sagas只是处理所有异步事件（以及其他内容，但现在不担心它）的方式，可能会以组件外部的方式发生在您的应用程序中。这意味着你的组件都可以是纯粹的函数，只需要根据它们提供的内容来制作道具和渲染。他们不需要自己做任何异步操作，并且始终表现可预测。也就是说，我的建议是查看redux库（here）并尝试将其与您的应用程序集成（您还需要react-redux库，This is a helpful article以更好地了解发生了什么）。不要担心thunk或sagas，只需使用上面显示的生命周期方法处理组件中的异步内容。然后，当你掌握了所有这些，你就可以开始研究thunk和sagas。

Answer 2

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

所以应该

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

你也有一个错字，该阵列作为两个：photosArray和photosarray