.map在循环对象时不起作用

Question

我上面的对象称为“列表”。我想使用.map循环并显示在我的React组件内部，这是我的尝试。

const {loading, city, list} = this.state;
    console.log(list);
    return loading === true
        ? <h1 className='header' > Loading.. </h1>
        : <div>
                <h2 className='forecast-header'>{city.name}</h2>
                <div className="forecast-body">
                    {
                        list.map((item) => (item.temp))
                    }
                </div>
          </div>

它产生了如下错误

  

index_bundle.js：6未捕获的TypeError：r.map不是函数

谁能解释我为什么会这样？谢谢

注意：以下是我如何初始化和更新组件内部状态的方法。

Answer 1

在您的初始状态列表上是字符串。更改为：

state={
forecastData: [],
loading: false,
city: '',
// CHANGE HERE
list: []
}

这样，当组件加载且没有数据时，map函数将在空数组而不是字符串上工作并抛出错误。

Answer 2

// State.
state = {
  city: ''
  forecastData: {},
  list: [],
  loading: true
}

// Render.
render() {

  const {city, list, loading} = this.state

  // Loading.
  if (loading) return 'Loading ..'

  // Invalid List.
  if (!Array.isArray(list)) return 'Invalid list.'

  // Good To Go .
  return (
    <div>
      <h2 className='forecast-header'>{city.name}</h2>
      <div className="forecast-body">
        {list.length ? list.map(x => x.temp) : '..'}
      </div>
    </div>
  )

}