时间戳

首页 > 解决方案 > 在 React 中获取 JSON 数据

javascript - 在 React 中获取 JSON 数据

问题描述

我正在用 React 做我的第一个项目，所以请温柔一点。

我无法将反应数据放入组件中。

根据本教程，我设置了组件。源代码来自视频。 

class WeatherInfo extends React.Component {

        constructor() {
            super();
            this.state = {
                items: [],
                isLoaded: false
            }
        }
        componentDidMount() {
            fetch(`https://api.openweathermap.org/data/2.5/forecast?q=Austin,USA&appid=583f803dfc6a7f2f96ff9957c330c2b0&units=imperial`)
                .then(results => results.json())
                .then(json => {
                        this.setState({
                            isLoaded: true,
                            items: json                           
                        })
                    });
                }

            render() {

                let {
                    isLoaded,
                    items
                } = this.state;
                if (!isLoaded) {
                    return <div> Loading... </div>
                } else {
                    return ( <div>
                        <ul>
                            {items.map(item => (
                                <li key="{item.list}">
                                    test: {item.list.main}
                                </li>
                            ))}
                        </ul> 
                        </div>
                    );
                }
            }
        }

将 JSON 连接到 ul... 或任何我想要的东西时感觉迷失了。我最近的错误是 items.map 不是函数。但我有一种强烈的感觉，即使修复该错误也不会从我想要的 api 中获取数据。

这是我想要使用数据的 JSON 链接的链接。最终项目将只选择一些数据，但我相信我知道如何正确访问数据我可以自己做到这一点。

谢谢你。

标签： javascriptreactjs

解决方案

教程中使用的 URL 正在返回记录数组

https://jsonplaceholder.typicode.com/users

[
{
  "id": 1, .....
}
]

虽然您的 api 端点不返回记录数组，但它正在返回对象，这就是它失败的原因。

试试这个：

                       {items.list.map(item => (
                            <li key="{item}">
                                test: {item.main}
                            </li>
                        ))}

推荐阅读