描述

Question

如何映射此类 API 数据？

2019-01-30

833

javascript reactjs api

我正在尝试从 API 映射数据，但遇到了一些问题。我怎样才能仅将名称推送到数组？没有名为“name”的属性或类似名称。

componentDidMount() {
    let url = `https://contact-browser.herokuapp.com/contacts`;
    let arr = []
    fetch(url).then(resp => resp.json()).then((data) => arr.push(data),
        this.setState({
            data: arr
        })
    );
}

    {this.state.data.map((person) => {
        return <li>{person}</li>
    })}

Answer 1

描述

好的，查看了从该 URL 返回的数据后，它返回了一个对象，因此，一种简单的方法是使用 Object.keys 。如您所见，我正在使用 map 函数从 Object.keys 生成的数组生成一个新数组，然后将 map 函数生成的数组传递到 log 函数中，这仅用于一个小演示。

我并不是说这是有史以来最有效/性能最友好的方式，但它是一种干净、简单、清晰和简洁的方式。

const url = `https://contact-browser.herokuapp.com/contacts`;
const log = args => console.log(args);

fetch(url).then(r => r.json()).then(d => log(Object.keys(d).map(k => d[k])));

编辑

正如评论中提到的，如果您想要更高效并且不关心键，您可以只使用 Object.values ，使用这种方法，需要处理的数据更少，处理更少，等等。

const url = `https://contact-browser.herokuapp.com/contacts`;
const log = args => console.log(args);

fetch(url).then(r => r.json()).then(d => log(Object.values(d)));

Answer 2

查看数据源看起来像这样：

046582007

您可以尝试以下内容：

514909329

请注意，object。值，object.entries，object.keys，for ... in ... and and and and and and and and and and the sorts note contery and the sorts the the the the the the the that in the键订购，则可以执行以下操作：

187128842

但是；当您渲染数据阵列时，您需要一个唯一的键或反应会给您警告。为了防止此警告，您可以为对象密钥提供数据：

763347268