React调用API获取JSON嵌套对象中response及currentSchedule数组数据问题

我在React项目中调用接口获取返回的JSON数据，需要提取response数组中的title、description字段，但是按照我下方编写的代码执行后无任何返回内容，同时还需要获取response内部嵌套的currentSchedule数组数据。

接口返回的all.json结构如下：

{"responseCode":200,
"responseMessage":"Channel Listing",
"response":[{
    "id":395,
    "title":"Title 1",
    "description":"Description 1",
    "currentSchedule":[{"eventId":"123456","title":"Hello Title"}]
    }]
}

原有App.js代码如下：

class App extends Component {

constructor(props){
    super(props);
    this.state = {
        items: [],
        isLoaded: false,
    }
}


componentDidMount(){
    fetch('/all.json')
        .then(res => {
            res.json()
            })
        .then(json => {
            this.setState({
                isLoaded: true,
                items: [],
            })
        });
}

render() { 

    var { isLoaded, items } = this.state;

    if(!isLoaded) {
        return <div>Loading...</div>;
    }

    else {
        return (
        <div className="App">
            <ul>
                {items.map(item => (
                    <li key={item.id}>
                        Title: {item.title} | Description: {item.description}
                    </li>
                ))};
            </ul>
        </div>
        );
    }
    
}
}

export default App;

解决方法 #

你的代码存在两处直接导致无数据返回的问题：

• 第一个then回调中只执行了res.json()但没有返回值，导致后续then拿到的参数是undefined
• setState时手动把items赋值为空数组，没有存储接口返回的有效数据

步骤1：修复数据请求逻辑 #

修改componentDidMount部分代码：

componentDidMount(){
    fetch('/all.json')
        .then(res => {
            // 必须返回解析后的JSON结果
            return res.json()
        })
        .then(json => {
            this.setState({
                isLoaded: true,
                // 将接口返回的response数组存入state
                items: json.response || []
            })
        });
}

步骤2：提取嵌套的currentSchedule数据 #

如果需要渲染嵌套的日程数据，修改渲染部分逻辑即可，可选添加可选链操作符避免空值报错：

render() { 
    const { isLoaded, items } = this.state;
    if(!isLoaded) {
        return <div>Loading...</div>;
    }
    return (
        <div className="App">
            <ul>
                {items.map(item => (
                    <li key={item.id}>
                        标题: {item.title} | 描述: {item.description}
                        <div>当前日程列表：</div>
                        <ul>
                            {/* 遍历嵌套的currentSchedule数组 */}
                            {item.currentSchedule?.map(schedule => (
                                <li key={schedule.eventId}>
                                    日程标题：{schedule.title} | 事件ID：{schedule.eventId}
                                </li>
                            )) || <div>暂无安排</div>}
                        </ul>
                    </li>
                ))}
            </ul>
        </div>
    );
}

内容的提问来源于stack exchange，提问作者HNG