如何在 React 中使用不同的变量类型在获取请求中加入数组？

Question

我正在开发一个 React 组件，该组件通过获取请求数据并获得一个 JSON 对象作为响应，该对象由字符串或字符串数组的值组成。

我想呈现列表中的每个键和值。如果该值是一个数组，我想将其转换为以分号分隔的字符串。但是，每当我在映射过程中尝试通过 .join() 方法将数组转换为字符串时，映射的元素永远不会呈现。如果我从映射中删除 .join() 方法，常量会很好地呈现。

为什么在映射fetch返回数据的过程中不能使用.join()方法？还是我做错了什么？我在控制台中没有看到任何指向语法问题的错误。

这似乎也适用于映射函数内的映射（与使用连接相反）。

class Record extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: []
    }
  }
  componentDidMount() {
    fetch('http://127.0.0.1:9200/_index/_doc/1')
      .then(res => res.json())
      .then(json => this.setState({data: json._source}))
  }
  render() {
    const data = this.state.data
    const record = Object.keys(data).map((f, i) => {
      return <li key={i}>{f} : {typeof data[f] === 'object' ? data[f].join('; ') : data[f]}</li>
    })
    return (
      <ul>
        {record}
      </ul>
    )
  }
}

编辑：数据响应的示例是：

{"foo": "string", "bar": ["baz", "fred"], "anotherfield": "anotherstring"}

理想情况下应显示为：
foo: 字符串
酒吧：巴兹；弗雷德
另一个字段：另一个字符串

Answer 1

问题是从数据返回的某些值是空值，returns 'true' for typeof === 'object'。因此，我需要使用 Array.isArray(data[f]) 来代替。

如何在 React 中使用不同的变量类型在获取请求中加入数组？

How to join array in fetch request with different variable types in React?

reactjs

fetch-api