javascript - 使用 API 中的对象数组作为 JSON 进行 d3 可视化时出现问题

Question

所以我构建了一个返回数组的 API，如下所示:

[{"id":1,"name":"Josh","parent":null},
{"id":2,"name":"Peter","parent":1},{"id":3,"name":"Mary","parent":2}]

我可以在我的 React 应用程序上使用它来显示表格，但现在我想将它用作 d3 图表的输入。因此，我构建了一个函数，它接受一组对象并将其转换为一个大的分层对象。

function convert(array){    
    var map = {};
    for(var i = 0; i < array.length; i++){
        var obj = array[i];
        obj.children= [];

        map[obj.id] = obj;

        var parent = obj.parent || '-';
        if(!map[parent]){
            map[parent] = {
                children: []
            };
        }
        map[parent].children.push(obj);
    }

    return map['-'].children;

问题是，当我使用 axios.get 传递从 API 获取的内容时，它会给出未定义的错误，就好像它无法解析数组内的对象一样。

如果另一方面，我手动插入相同的数组:

const rawData2 = [{"id":1,"name":"Javier","parent":null},
{"id":2,"name":"Nerea","parent":1}, 
{"id":3,"name":"Yolo","parent":2}]

它可以正常工作。

我不知道还能尝试什么。我尝试了 stringfy，解析 json，使用这样的 map :

var result = this.state.persons.map(person => ({id: person.id, name: person.name, parent: 
person.parent}))

没有任何作用。

有什么帮助吗？

编辑:我认为这个问题与 JS 是异步的这一事实有关，因此当我将 API 响应传递给转换函数时，我还在实际传递数据中的实际数组之前传递了一些空数组。

如何锁定数据以避免这种情况？抱歉，我缺乏技术词汇，但我对这种类型的语言还很陌生。

Edit2:这是我从 API 检索数据的方式:

componentWillMount() {
    this._refreshAliens()
  }

  _refreshAliens () {
    axios.get('http://localhost:8080/aliens').then((response) => {
      this.setState({
        aliens: response.data
      })
     });

然后我就简单地这样做:转换(this.state.aliens)给我错误:可以将属性子项添加到未定义。

如果我console.log(this.state.aliens):

我得到了一些 []、[]，然后是 (3) [{…}、{…}、{…}] 以及正确的数据。

编辑:

render() {
    let aliens = this.state.aliens.map((alien) => {
      return (
        <tr key={alien.id}>
          <td>{alien.id}</td>
          <td>{alien.name}</td>
          <td>{alien.type}</td>
          <td>{alien.planet}</td>
          <td>{alien.parent}</td>
          <td>
            <Button color="success" size="sm" className="mr-2" onClick={this.editAlien.bind(this, alien.id, alien.name, alien.planet)}>Edit</Button>
            <Button color="danger" size="sm" onClick={this.deleteAlien.bind(this, alien.id)}>Delete</Button>
          </td>
        </tr>
      )
      })
    const { all = [] } = this.state.aliens
      if (Array.isArray(all) && all.length === 0) {
        return <p>Loading...</p>
      } 
    return (

      <div className="App container">

          ...........

编辑错误:

错误:对象作为 React 子对象无效(发现:带有键 {id、name、type、planet、parent} 的对象)。如果您打算渲染子集合，请改用数组。

_刷新外星人/

  57 | }
  58 | _refreshAliens () {
  59 |   axios.get('http://localhost:8080/aliens').then((response) => {
> 60 |     this.setState({
     | ^  61 |       aliens: response.data
  62 |     })
  63 | 

Answer 1

在 API 请求发生期间，外星人状态将为空数组。您还需要在转换函数中处理这种情况。添加空检查以避免在这种情况下返回错误。

function convert(array = []){    
    var map = {};
    for(var i = 0; i < array.length; i++){
        var obj = array[i];
        obj.children= [];

        map[obj.id] = obj;

        var parent = obj.parent || '-';
        if(!map[parent]){
            map[parent] = {
                children: []
            };
        }
        map[parent].children.push(obj);
    }

    return map['-'] ? map['-'].children : null;
}

编辑:还添加加载程序以避免在 API 数据可用的情况下出现进一步错误，就像在渲染函数中这样:

render() {
  const { aliens = [] } = this.state
  if (Array.isArray(aliens) && aliens.length === 0) {
    return <p>Loading...</p>
  }

  return (
    // Do your stuff...
  )

}

编辑2:确保你正确地从国家中解构外星人。生成的代码应如下所示:

render() {
  const {aliens = []}= this.state;

  if (!Array.isArray(aliens) || aliens.length === 0) {
    return <p>Loading...</p>
  } 

  return (

      <div className="App container">
         {
            aliens.map((alien) => {
              return (
                <tr key={alien.id}>
                  <td>{alien.id}</td>
                  <td>{alien.name}</td>
                  <td>{alien.type}</td>
                  <td>{alien.planet}</td>
                  <td>{alien.parent}</td>
                  <td>
                    <Button color="success" size="sm" className="mr-2" onClick={this.editAlien.bind(this, alien.id, alien.name, alien.planet)}>Edit</Button>
                    <Button color="danger" size="sm" onClick={this.deleteAlien.bind(this, alien.id)}>Delete</Button>
                  </td>
                </tr>
              )
            })
         }

         // Other stuff...
      </div>
    )