Javascript 在 api 响应后呈现 react 组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44911012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rendering react component after api response
提问by r_cahill
I have a react component that I wish to populate with images using the Dropbox api. The api part works fine, but the component is rendered before the data comes through & so the array is empty. How can I delay the rendering of the component until it has the data it needs?
我有一个反应组件，我希望使用 Dropbox api 填充图像。api 部分工作正常，但组件在数据通过之前呈现，因此数组为空。如何延迟组件的渲染，直到它拥有所需的数据？
var fileList = [];
var images = [];
var imageSource = [];
class Foo extends React.Component {
render(){
dbx.filesListFolder({path: ''})
.then(function(response) {
fileList=response.entries;
for(var i=0; i<fileList.length; i++){
imageSource.push(fileList[0].path_lower);
}
console.log(imageSource);
})
for(var a=0; a<imageSource.length; a++){
images.push(<img key={a} className='images'/>);
}
return (
<div className="folioWrapper">
{images}
</div>
);
}
}
Thanks for your help!
谢谢你的帮助！
回答by Mayank Shukla
Changes:
变化：
1.Don't do the api call inside render method, use componentDidMountlifecycle method for that.
1.不要在 render 方法中调用 api，componentDidMount为此使用生命周期方法。
componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.
componentDidMount() 在组件安装后立即调用。需要 DOM 节点的初始化应该在这里进行。如果您需要从远程端点加载数据，这是实例化网络请求的好地方。在此方法中设置状态将触发重新渲染。
2.Define the imageSourcevariable in state array with initial value [], once you get the response update that using setState, it will automatically re-render the component with updated data.
2.imageSource用初始值定义状态数组中的变量[]，一旦你得到使用setState的响应更新，它会自动用更新的数据重新渲染组件。
3.Use the state array to generate the ui components in render method.
3.使用状态数组在render方法中生成ui组件。
4.To hold the rendering until you didn't get the data, put the condition inside rendermethod check the length of imageSourcearray if length is zero then return null.
4.为了保持渲染直到你没有得到数据，把条件放在render方法里面检查imageSource数组的长度如果长度为零那么return null。
Write it like this:
像这样写：
class Foo extends React.Component {
constructor(){
super();
this.state = {
imageSource: []
}
}
componentDidMount(){
dbx.filesListFolder({path: ''})
.then((response) => {
let fileList = response.entries;
this.setState({
imageSource: fileList
});
})
}
render(){
if(!this.state.imageSource.length)
return null;
let images = this.state.imageSource.map((el, i) => (
<img key={i} className='images' src={el.path_lower} />
))
return (
<div className="folioWrapper">
{images}
</div>
);
}
}
回答by DonovanM
You should be using your component's state or props so that it will re-render when data is updated. The call to Dropbox should be done outside of the rendermethod or else you'll be hitting the API every time the component re-renders. Here's an example of what you could do.
您应该使用组件的 state 或 props，以便在数据更新时重新渲染。对 Dropbox 的调用应该在该render方法之外完成，否则每次组件重新渲染时都会调用 API。这是您可以执行的操作的示例。
class Foo extends React.Component {
constructor(props) {
super(props);
this.state = {
imageSource: []
}
}
componentDidMount() {
dbx.filesListFolder({ path: '' }).then(function(response) {
const fileList = response.entries;
this.setState({
imageSource: fileList.map(file => file.path_lower);
})
});
}
render() {
return (
<div className="folioWrapper">
{this.state.imageSource.map((image, i) => <img key={i} className="images" src={image} />)}
</div>
);
}
}
If there are no images yet, it'll just render an empty divthis way.
如果还没有图像，它只会以div这种方式渲染一个空的。
回答by Francisco Mateo
First off, you should be using the component's stateand not using globally defined variables.
首先，您应该使用组件的状态而不是使用全局定义的变量。
So to avoid showing the component with an empty array of images, you'll need to apply a conditional "loading" class on the component and remove it when the array is no longer empty.
因此，为了避免显示带有空图像数组的组件，您需要在组件上应用有条件的“加载”类，并在数组不再为空时将其删除。
