Javascript 如何将数组列表转换为良好打包的状态？

我有一个API调用返回啤酒厂列表。我想将其从当前格式转换为我的React state容器。比如：

state = {
    breweries: [ {name: Foo,
                  long: 45,
                  lat: -39.239},
                 {name: Bar,
                  long: 47,
                  lat: -27.394}
    ]
}

我想我已经成功地将它放入了Javascript对象数组中了？在my console.log中。见下图

我想我必须对.map函数做些什么，但我不确定是什么。目前我的代码如下：

class App extends Component {
    state = {
        breweries: null
    };

    componentDidMount() {
        const breweries = axios
            .get("https://api.openbrewerydb.org/breweries")
            .then(response => response.data)
            .then(list => this.setState({ breweries: list }));
    }

    printState = () => {
        console.log(this.state.breweries);
    };

    render() {
        const response = axios
            .get("https://api.openbrewerydb.org/breweries")
            .then(response => console.log(response));

        return (
            <div className="App">
                {/* <button onClick={this.printBreweries}>Click Me</button> */}
                <button onClick={this.printState}>Also click me</button>
            </div>
        );
    }
}

目前，我所能做的最好的事情显示在上面的代码中。thenlist=>this.setState{breweries:list}导致console.logthis.state.breweries输出对象数组，但这不是我想要的

帮助？

是的，将帮助您转换列表中的每个项目，例如

axios
  .get("https://api.openbrewerydb.org/breweries")
  .then(res => res.data.map(({ name, long, lat }) => ({ name, long, lat })))
  .then(list => this.setState({ breweries: list }));

---

注意-首先是使用参数，并利用箭头函数的功能，通过将主体括起来返回默认结果，在这种情况下，将返回一个对象文本

注意，我必须重写long，lat以匹配经度和纬度，因为res对象包含这些变量名，而不是long，lat.只是想添加这个，因为我在进行更改之前没有定义。@RolyPoly不用担心，我只是根据您在示例中使用的属性进行操作