react-ajax:组件接收到数据后，在render函数内return jsx模板:渲染数据列表，会出现报错，页面无法显示

原因：组件还没有render因为ajax是异步的而render第一次更新获取不到数据。

AJAX通常是一个异步请求，也就是说，即使componentDidMount函数调用完毕，数据也不会马上就获得，浏览器会在数据完全到达后才调用AJAX中所设定的回调函数，有时间差。因此当响应数据、更新state前，需要先通过this.isMounted() 来检测组件的状态是否已经mounted。

解决：

在jsx内加入判断，在满足条件的情况下渲染即可

 {test instanceof Array?'数组':"不是数组"}

 {
                   test instanceof Array
                   ?
                   (
                   <div>
                      {
                           test.map((v,i)=>{
                            return(
                            <div key={i}>{v.name}</div>
                            )
                        })
                      }
                   </div>)
                   :
                   (
                       <div>
                           
                       </div>
                   )
               }

错误代码：

 {/* {
                           test.map((v,i)=>{
                            return(
                            <div key={i}>{v.name}</div>
                            )
                        })
                      }
                   不带判断报错信息：   Cannot read property 'map' of null */}

注意不要这样判断：

test.length>0或test.length 页面都无发正常显示并报错

改成在jsx内这样判断： test instanceof Array页面就成功显示了

 

解决二：在render函数内return前线判断

例如：

render() {
                const {repName,repUrl} = this.state;
                if(!repName){
                    return <h2>LOADING...</h2>
                }else{
                    return <h2>Most star repo is <a href={repUrl}>{repName}</a></h2>
                }
            }

 

 

扩展：

扩展：在React组件中如何通过AJAX请求来加载数据呢？

首先，AJAX请求的源URL应该通过props传入；其次，最好在componentDidMount函数中加载数据。加载成功，将数据存储在state中后，通过调用setState来触发渲染更新界面。

一般将数据请求Ajax方法写在组件的hook函数componentDidMount 中，这样一旦页面加载完毕就开始执行Ajax函数。
从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

对于同步的状态改变，是可以放在componentWillMount，对于异步的，最好好放在componentDidMount。

 参考代码：

import React from 'react'
import {Form,Select,Button,Upload,Radio,DatePicker} from 'antd'
//日期中文
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import axios from 'axios'//引入axios
const { RangePicker } = DatePicker;
const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 12 },
};
const labelCol={
    span: 3, offset: 12
}
const validateMessages = {
    required: '${label} 不能为空!',//必选规则
    types: {
      email: '${label} is not validate email!',
      number: '${label} is not a validate number!',
    },
    number: {
      range: '${label} 必须在 ${min} 和 ${max}之间',
    },
};
//绑定上传的date
const normFile = e => {//这个很重要，如果没有将上传失败并报错
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
    };
    // -------------------------------------------------------------------------------------------------------------
class FormMonth extends React.Component{
    constructor(props){
        super(props)
        this.state={
            test:null,
            test2:[1,2,3]
        }
    }
    formRef = React.createRef();
    onFill = () => {//给选择框等设置默认值
        this.formRef.current.setFieldsValue({
            jiemu:'节目一',
            reapeat:'每天',
            onJiemu:'是'
        })
        console.log(this.formRef.current.getFieldValue())//这里能够获取到初始化挂载的值
    };
    //ajax---------------------------------------------
    ajaxhostServe=()=>{//服务器请求
        // 涉及到跨域问题，要在开发环境中，想要正常访问到8000端口的服务，我们需要代理。
        // 代理的做法是：在项目的package.json文件添加“proxy”属性，并重新运行npm start
        //"browserslist": ...同级下
        // "proxy": "http://localhost:8000"
        //既可访问本地 也可访问新开启的服务器所访问的文件

        // axios.get('/api/users')
        // .then( (response)=> {
        //     // handle success
        //     console.log(response);
        // })
        // .catch( (error)=> {
        //     // handle error
        //     console.log(error);
        // })
        fetch('/api/users').then(res => {
            console.log(res)
            return res.json()
        }).then(data => {
            console.log(data)
            this.setState({test: data})
        })
    }
    ajaxFetch=()=>{//发送的网络请求
        fetch('/static/ajax.json').then(res => {
            console.log(res)
            return res.json()
        }).then(data => {
            console.log(data)
            this.setState({test: data})
        })
    }
    ajaxAxios=()=>{
        axios.get('/static/ajax.json')
        .then( (response)=> {
            // handle success
            console.log(response);
            if(response){
                this.setState({
                    test:response.data
                })
            }
        })
        .catch( (error)=> {
            // handle error
            console.log(error);
        })
    }
    // 周期函数--------------------------------------
    // componentWillMount(){//将要挂载时 请求接口在这里通常
    //     this.ajaxAxios()
    // }
    // componentWillUnmount(){//销毁前 -切换到其它页面组件时会调用
    //    console.log('unmounted')
    // //    console.log(this.state.test)//能够请求到
    // }
    componentDidMount(){//挂载时 获取ref要在这里就可以设置默认值
        // this.ajaxFetch()
        this.onFill()
        this.ajaxAxios()
        // this.ajaxhostServe()//从服务器上面获取的数据
        // console.log(this.state.test)//null 请求不到数据为空
    }
    render(){
        console.log(this.state.test)//能够请求到数据
        // this.onFill()//这时候获取formRef 会报错
        const OptArr=['节目一','节目二','节目三','节目四','节目五','节目六']
        const {Option} = Select
        const onFinish = (v)=>{
            // console.log(v)
            const timer=v['choseTimer']
            const value={
                ...v,
                'choseTimer':[timer[0].format('YYYY-MM-DD h:mm:ss'),timer[1].format('YYYY-MM-DD h:mm:ss')]
            }
            console.log(value)
        }
       const test = this.state.test
        return(
            <div>
                {/* {
                           test.map((v,i)=>{
                            return(
                            <div key={i}>{v.name}</div>
                            )
                        })
                      }
                   不带判断报错信息：   Cannot read property 'map' of null */}
                {/* {test instanceof Array?'数组':"非数组"} */}
               {
                   test instanceof Array
                   ?
                   (
                   <div>
                      {
                           test.map((v,i)=>{
                            return(
                            <div key={i}>{v.name}</div>
                            )
                        })
                      }
                   </div>)
                   :
                   (
                       <div>
                       </div>
                   )
               }
                <Form ref={this.formRef} {...labelCol} {...layout} onFinish={onFinish}>
                    {/* 选择节目 */}
                   <Form.Item name="jiemu" label="节目">
                        <Select>
                            {
                                OptArr.map((v)=>{
                                    return(
                                    <Option key={v} value={v}>{v}</Option>
                                    )
                                })
                            }
                        </Select>
                   </Form.Item>
                   {/* 上传 */}
                   {/* valuePropName="fileList"  getValueFromEvent={normFile}  这两个需同时*/}
                   <Form.Item name="upload"  valuePropName="fileList"  getValueFromEvent={normFile} label="上传">
                   <Upload name="logo" action="/upload.do" listType="picture">
                        <Button>添加素材</Button>
                   </Upload>
                   </Form.Item>
                   {/* 重复 */}
                   <Form.Item label="重复" name="reapeat">
                      <Radio.Group>
                        <Radio value="每天">每天</Radio>
                        <Radio value="每周">每周</Radio>
                        <Radio value="每月">每月</Radio>
                        <Radio value="特别日">特别日</Radio>
                        <Radio value="自定义">自定义</Radio>
                      </Radio.Group>
                    </Form.Item> 
                    {/*开机节目*/}
                    <Form.Item label="开机节目" name="onJiemu">
                                <Radio.Group>
                                    <Radio value="是">是</Radio>
                                    <Radio value="否">否</Radio>
                                </Radio.Group>
                    </Form.Item>
                    {/*日期选择*/}
                    <Form.Item label='日期选择' name='choseTimer'>
                        <RangePicker locale={locale} showTime></RangePicker>
                    </Form.Item>
                    {/*提交*/}
                    <Form.Item
                    wrapperCol={{ ...layout.wrapperCol, offset: 6 }}>
                        <Button type='primary' htmlType="submit">提交</Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
export default FormMonth