在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 在componentDidMount()設置值后,在this.swiper()里

在componentDidMount()設置值后,在this.swiper()里面取不到值

console.log('+++++++++數(shù)據(jù)輪詢開始+++++++++')
        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('+++++++++數(shù)據(jù)輪詢開始+++++++++')
        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('+++++++++數(shù)據(jù)輪詢開始+++++++++')
        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);
    }



    // 處理鎖定函數(shù)
    handleLockingClick (){
        this.setState({
            isLocked: !this.state.isLocked
        })
    }

    getUpdateTaskArray() {

        console.log('--------更新數(shù)組函數(shù)--------')
        let temp = []
        /*
        let taskArray = [
            '任務一:開始了',
            '任務二:等待中',
            '任務三:行動中',
            '任務四:繼續(xù)中',
            '任務五:結束了'
        ]
        */

        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;
回答
編輯回答
菊外人

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

2017年4月8日 12:57