Question

我是React的新手，所以我试图通过一些例子来管理它。我创建了这个组件，它调用ajax来呈现一个简单的列表。

import React from "react";
import axios from 'axios';
import Page from '../components/Page/Page';
import ListJobs from '../components/ListJobs/ListJobs';

let state ;
class Home extends React.Component{
    constructor(props){
        super(props);
        this.state ={jobs:[]};             
    }

    componentDidMount(){       
        var _this = this;           
        this.serverRequest = axios.get("http://codepen.io/jobs.json")
                                    .then(function(result){
                                        _this.setState({
                                        jobs:result.data.jobs
                                        });                                          
                                    });   
    }
    componentWillUnmount() {

    } 

    render(){             
        return( 
            <div>
                <Page title="Home">           
                    <p>Home</p>
                    <ul>                        
                        {this.state.jobs.map(function(job,index) {
                            return(
                                <ListJobs key={index} job={job}/>
                            );
                        })}
                    </ul>
                </Page>
            </div>
        );
    }
}
export default Home;

它调用另一个子组件来呈现li元素。每次我调用这个组件时，它都以这个ajax调用开始，所以我想知道是否有办法保存这个ajax调用的结果并重新使用它，而不是每次请求都启动它。我试着这样做https://jsfiddle.net/corvallo/mkp4w8vp/ 但是我在开发者控制台中收到此错误：

警告：数组或迭代器中的每个子节点都应该有一个唯一的“key”prop。检查Home

的呈现方法

提前感谢您的帮助

Answer 1

如果您只想在应用启动时调用ajax，那么您可以在父组件（可能是App）上进行ajax调用，然后将其作为道具传递给Home组件

修改

如果你只想从组件调用ajax，我认为你可以实现缓存或某种类型，例如使用localstorage

例如

componentDidMount(){ let cache = JSON.parse(localStorage.getItem('homeCache') || "{}"); if(cache.hasOwnProperty('cached') && cache.hasOwnProperty('jobs')){ this.setState({jobs:cache.jobs}); }else{ (/*YOUR API HERE*/).then(function(result){ _this.setState({jobs:result.data.jobs}); localStorage.setItem('homeCache', JSON.stringify({cached: true, jobs: result.data.jobs})); }); } }

每当用户退出应用程序时，清除缓存（或者您希望清除缓存的任何时间）

localStorage.setItem('homeCache', JSON.stringify({}));

我认为这是现在突然出现的一种解决方案..

避免双ajax调用

1 个答案: