在componentDidMount()设置值后，在this.swiper()里面取不到值

Question

console.log('+++++++++数据轮询开始+++++++++')
        console.log(content)

这里取不到值

swiper() {
        /*
        function callFunction(){
           console.log(1);
        }

        var timeTask=setInterval(function(){
            var date=new Date();
            var h=date.getHours();
            var m=date.getMinutes();
            var s=date.getSeconds();
            callFunction(h);
        },1000);
        */


        var _self = this;

        let i = 1;

        let content = this.state.taskTotalNames;

        console.log('+++++++++数据轮询开始+++++++++')
        console.log(content)

        function callFunction(i){
            console.log(content[i])
            _self.setState({clickLiName: content[i]})
        }

        var timeTask=setInterval(function(){
            var date=new Date();
            var h=date.getHours();
            var m=date.getMinutes();
            var s=date.getSeconds();
            callFunction(i);
            i++
            if (i === content.length) {
                i = 0;
            }

        },5000);
    }

整个代码

import React from 'react';

import returnData from './data/data01.json';
import './taskArray.css';

class Basic extends React.Component {

    constructor (props) {
        console.log('组件初始化进行了');
        super(props)
        this.state = {
            taskTotalNames: '', // 任务所有名称
            taskUpdateNames: '', // 任务下拉列表中的名称
            taskTotalIds: '', // 任务所有ID
            taskUpdateIds: '', // 任务下拉列表中的ID
            changeValue: '', // 任务栏改变值
            taskList_div: false,
            isShowAll: false, // 这个是控制 要不要 显示所有任务
            clickLiName: '', // 这个默认是显示第一个
            isClickedLi: false, // 这个是默认没有点击过li
            isLocked: false,
            hideOneLiIndex: 0
        }
    }

    componentWillMount() {
        console.log('组件将要渲染');
        //this._initialize()
    }

    handleOnMouseEnter () {
        this.setState({isShowAll: true})
    }

    handleOnMouseLeave () {
        this.setState({isShowAll: false})
    }

    _initialize() {
        let taskArray = returnData.task;

        var taskTotalNames = []

        for(var tname in taskArray){
            taskTotalNames[tname] = taskArray[tname]['name']
        }

        this.setState({taskTotalNames: taskTotalNames})
        this.setState({clickLiName: taskTotalNames[0]})

        var taskTotalIds = []

        for(var tid in taskArray){
            taskTotalIds[tid] = taskArray[tid]['id']
        }

        this.setState({taskTotalIds: taskTotalIds})
    }

    componentDidMount() {

        this._initialize()
        console.log('组件正式开始渲染')
        console.log(this.state.taskTotalNames)
        console.log('组件正式开始渲染')
        if (!this.state.isClickedLi) {
            this.swiper()
        }
    }

    renderLi (name, index) {
        return (
            this.state.hideOneLiIndex !== index
            ? <li key={name} onClick={this.handleClickedLi.bind(this, name, index)} className={'locking_ul_li'}>
                {name} </li> : null)
    }

    handleClickedLi (name, index) {
        this.setState({
            isClickedLi: true,
            clickLiName: name, // 显示的第一个
            isShowAll: false,
            hideOneLiIndex: index
        })
    }

    swiper() {
        /*
        function callFunction(){
           console.log(1);
        }

        var timeTask=setInterval(function(){
            var date=new Date();
            var h=date.getHours();
            var m=date.getMinutes();
            var s=date.getSeconds();
            callFunction(h);
        },1000);
        */


        var _self = this;

        let i = 1;

        let content = this.state.taskTotalNames;

        console.log('+++++++++数据轮询开始+++++++++')
        console.log(content)

        function callFunction(i){
            console.log(content[i])
            _self.setState({clickLiName: content[i]})
        }

        var timeTask=setInterval(function(){
            var date=new Date();
            var h=date.getHours();
            var m=date.getMinutes();
            var s=date.getSeconds();
            callFunction(i);
            i++
            if (i === content.length) {
                i = 0;
            }

        },5000);
    }



    // 处理锁定函数
    handleLockingClick (){
        this.setState({
            isLocked: !this.state.isLocked
        })
    }

    getUpdateTaskArray() {

        console.log('--------更新数组函数--------')
        let temp = []
        /*
        let taskArray = [
            '任务一：开始了',
            '任务二：等待中',
            '任务三：行动中',
            '任务四：继续中',
            '任务五：结束了'
        ]
        */

        let taskTotalNames = this.state.taskTotalNames;
        //console.log('=========this.state.taskTotalNames=========')
        //console.log(this.state.taskTotalNames)
        for (var i = 0;i<taskTotalNames.length;i++) {
            temp.push(taskTotalNames[i])
        }
        //console.log('=========temp=========')
        //console.log(temp)
        return temp
    }

    render () {

        console.log('渲染render()')

        const taskTempNames = this.state.taskTotalNames;

        //console.log('==============render()==============')
        //console.log('==============taskTempNames==============')
        //console.log(taskTempNames)

            /* 总体 */
        var frameDiv = {
            height: 30,
            width: 132,
            backgroundColor: '#13CDF4',
            position: 'absolute',
            left: 600,
            top:83
        }

        var substance = {
            height: 30,
            width: 132,
            backgroundColor: '#13CDF4',
            position: 'absolute',
            left: 900,
            top:83
        }

        return (
            <div className='primaryStyle'>
                {/* 选择 锁定与未锁定 onmouseenter onmouseleave */}
                {/* 选择 锁定与未锁定 onmouseenter onmouseleave */}
                <div className={'cs_locking_frame'} style={frameDiv}>
                    <div className={'cs_locking_list'} onMouseLeave={this.handleOnMouseLeave.bind(this)}>
                        <div className={'cs_locking_clickLiName'}
                            onMouseEnter={this.handleOnMouseEnter.bind(this)}>
                            {this.state.clickLiName}
                            </div>
                        {this.state.taskTotalNames && this.state.taskTotalNames.length != 0?
                        <ul className={'locking_ul'}>
                            {taskTempNames.map((item, index) => {
                                //console.log(index)
                                //console.log(taskTempNames[index])
                                return !this.state.isShowAll ? null : this.renderLi(item, index)
                            })}
                        </ul>: ''
                        }
                    </div>
                </div>

                <div  className={'cs_locking_substance'} style={substance}>
                    {this.state.isClickedLi?
                        <span onClick={this.handleLockingClick.bind(this)}>锁定</span> : <span>未锁定</span>
                    }
                </div>
            </div>
        )
    }
}
export default Basic;

Answer 1

把this打印出来看看this指向了哪里