说明

Question

我正在尝试从API映射数据，但是我有一些问题。如何仅将名称推送到数组？没有名为“名称”或类似名称的属性。

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函数产生的数组传递到{{ 1}}函数，仅用于一些演示。

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

log

编辑

如评论中所述，如果您想提高效率而又不关心键，则您可以，只需使用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.keys(d).map(k => d[k])));

Answer 2

看一下数据源，就像这样：

{
  "1": "Jason Brown",
  "2": "Angela Houston",
  "3": "Angela Maynard",
  "4": "Natasha West",
  "5": "Christina Lee",
  "6": "Bryan Baker",
  //other stuff
}

您可以尝试以下操作：

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

请注意，不能保证Object.values，Object.entries，Object.keys，...和排序按任何顺序返回数据，因此，如果要按键排序，可以执行以下操作：

componentDidMount() {
  let url = `https://contact-browser.herokuapp.com/contacts`;
  let arr = []
  fetch(url).then(resp => resp.json()).then((data) => 
      this.setState({
          data: Object.entries(data)
            .map(([key,val])=>[Number(key),val])//make key a number
            .sort(([a],[b])=>a-b)//sort by ket
            .map(([,val])=>val)//do not use the key for data
      })
  );
}

但是；当您渲染数据数组时，您需要一个唯一的键，否则React会警告您。为避免出现此警告，您可以为对象密钥提供数据：

componentDidMount() {
  let url = `https://contact-browser.herokuapp.com/contacts`;
  let arr = []
  fetch(url).then(resp => resp.json()).then((data) => 
      this.setState({
          data: Object.entries(data)
            .map(([key,val])=>({key:Number(key),val}))//make key a number
            .sort((a,b)=>a.key-b.key)//sort by key
      })
  );
}

{this.state.data.map(({key,val}) => {
  return <li key={key}>{val}</li>
})}

如何映射这种类型的API数据？

2 个答案:

说明

编辑