javascript - 在React中获取JSON数据

Question

我正在用 React 制作我的第一个项目，所以请保持温柔。

我在将 react 数据放入组件时遇到问题。

基于this tutorial我设置了该组件。 source code来自视频。

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 中获取数据。

Here's a link到我想要使用的数据的 JSON 链接。最终项目将仅选择部分数据，但我相信我知道如何正确访问数据，我可以自己做到这一点。

谢谢。

Answer 1

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

https://jsonplaceholder.typicode.com/users

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

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

试试这个:

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