我想循環(huán)讀取d01.json、d02.json、d03.json三個(gè)數(shù)據(jù)，但是第一次render讀不到數(shù)據(jù)為什么？

問(wèn)題一

問(wèn)題二

怎么寫循環(huán)讀取數(shù)據(jù)

dataRead.js

import React from 'react';
import Data01 from './data/d01.json';
import Data02 from './data/d02.json';
import Data03 from './data/d03.json';

class Basic extends React.Component {

    constructor() {
        super();
        this.state = {
            data: ''
        }
    }

    componentDidMount(){

        let taskArray = Data01.task;

        var taskNames = []

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


        this.setState({taskNames: taskNames})
    }

    render() {

        console.log('==============taskNames==============')
        console.log(this.state.taskNames)
        const taskNames = this.state.taskNames;

        var divStyle = {

        }

        return (

            <div id style={divStyle} className='data-line'>
                {taskNames}
            </div>
        )
    }
}

export default Basic;

d01.json

{
    "code": 100,
    "msg": "success",
    "task": [
        {
            "name": "任務(wù)1111111：開(kāi)始了",
            "id": "1，2，3"
        },
        {
            "name": "任務(wù)二：準(zhǔn)備中",
            "id": "2，3，5，6，7"
        },
        {
            "name": "任務(wù)三：進(jìn)行中",
            "id": "5，6，7"
        },
        {
            "name": "任務(wù)四：執(zhí)行了",
            "id": "10，12，15"
        },
        {
            "name": "任務(wù)五：結(jié)束了",
            "id": "21，23，25"
        }
    ]
}

d02.json

{
    "code": 200,
    "msg": "success",
    "task": [
        {
            "name": "任務(wù)2222222：開(kāi)始了",
            "id": "1，2，3"
        },
        {
            "name": "任務(wù)二：準(zhǔn)備中",
            "id": "2，3，5，6，7"
        },
        {
            "name": "任務(wù)三：進(jìn)行中",
            "id": "5，6，7"
        },
        {
            "name": "任務(wù)四：執(zhí)行了",
            "id": "10，12，15"
        },
        {
            "name": "任務(wù)五：結(jié)束了",
            "id": "21，23，25"
        }
    ]
}

d03.json


{
    "code": 300,
    "msg": "success",
    "task": [
        {
            "name": "任務(wù)三：開(kāi)始了",
            "id": "1，2，3"
        },
        {
            "name": "任務(wù)二：準(zhǔn)備中",
            "id": "2，3，5，6，7"
        },
        {
            "name": "任務(wù)三：進(jìn)行中",
            "id": "5，6，7"
        },
        {
            "name": "任務(wù)四：執(zhí)行了",
            "id": "10，12，15"
        },
        {
            "name": "任務(wù)五：結(jié)束了",
            "id": "21，23，25"
        }
    ]
}

圖片描述

這么寫？


import React from 'react';

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

class Basic extends React.Component {

    constructor (props) {
        super(props)
        this.state = {
            taskNames: '', // 任務(wù)名稱
            taskIds: '', // 任務(wù)ID
            changeValue: '', // 任務(wù)欄改變值
            taskList_div: false,
            isShowAll: false, // 這個(gè)是控制 要不要 顯示所有任務(wù)
            clickLiName: '', // 這個(gè)默認(rèn)是顯示第一個(gè)
            isClickedLi: false, // 這個(gè)是默認(rèn)沒(méi)有點(diǎn)擊過(guò)li
            isLocked: false,
            hideOneLiIndex: 0
        }

        this._initialize()
    }

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

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

    _initialize() {
        let taskArray = returnData.task;

        var taskNames = []

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

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

        var taskIds = []

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

        this.setState({taskIds: taskIds})
    }




    componentDidMount() {

        /*
        console.log('組件正式開(kāi)始渲染')
        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, // 顯示的第一個(gè)
            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 = 0;

        let content = this.state.taskNames;

        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);
            if (i === content.length) {
                i = 0;
            }
        },1000);



    }



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

    render () {
        const taskNames = this.state.taskNames;

        console.log('==============taskNames==============')
        console.log(taskNames)

            /* 總體 */
        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.taskNames && this.state.taskNames.length != 0?
                        <ul className={'locking_ul'}>
                            {taskNames.map((item, 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;

回答

編輯回答