使用React Async渲染数组是未定义的

Question

我正在从一个REST服务检索数据。数据以数组的形式返回。这是我用来检索数据的函数。

export function fetchMessage() {
  return function(dispatch) {
    axios.get(`${ROOT_URL}/currencies`, {
      headers: { token: localStorage.getItem('token') }
    })
     .then(response => {
       console.log(response.data);
       dispatch({
         type: FETCH_MESSAGE,
         payload: response.data
       });
     });
  }
}

fetchMessage的输出是一个object数组。

[Object, Object, Object, Object, Object, Object]
0:Object
    addedDate:"2013-08-22"
    ccyCode:"CHF"
    country:"SCHWIZER FRANC"
    lastChangeDate:"2016-05-02"
    offerRate:7.02
    prevRate:8.501
    prevRateDate:"2016-04-01"
    rate:8.425
    rateDate:"2016-05-01"
    unit:1
    __proto__:Object
1:Object
2:Object
3:Object
4:Object
5:Object

fetchMessage函数由下面的组件调用。

class Feature extends Component {
  componentWillMount() {
    this.props.fetchMessage();
    //console.log(this.props);
  }
  render() {
    return (
      <div>{this.props.message}</div>
    );
  }
}
function mapStateToProps(state) {
  return { message: state.auth.message };
}
export default connect(mapStateToProps, actions)(Feature);

组件不能呈现消息，因为它是

bundle.js:1256 Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {ccyCode, country, unit, rateDate, rate, prevRateDate, prevRate, offerRate, addedDate, lastChangeDate}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Feature`.(…)

我试着像这样绘制this.props.message的地图

<div>
        {this.props.message.map(
          function(object){
            return ('Something'
            );
          }
        )}
</div>

但是我得到一个错误消息说我不能运行message上的map。如何在对象中呈现数据?我是否需要以其他方式保存它?我如何遍历对象来渲染它们?

Answer 1

更新:我认为你的问题只是this.props.message在初始渲染上未定义。尝试渲染null，如果它没有设置。

render() {
  if (!this.props.message) return null
  return (
    <div>
      {this.props.message.map(message => {
        return (
          <div key={message.ccyCode}>...
            {message.ccyCode} {message.rate} ...
          </div>
        )
      })}
    </div>
  )
}

如果有人对动态渲染对象感兴趣，我下面的回答可能仍然有帮助。

我假设你想动态地呈现来自对象的数据，而不是必须显式地呈现每个字段。

尝试遍历Object.keys并渲染数据。

<div>
    {Object.keys(this.props.message).map(key => {
        return (
          <div key={key}> // you need a dynamic, unique key here to not get a React warning
            {key}: {this.props.message[key]}
          </div>
        )
      }
    )}
</div>

如果你只是想显示数据调试/检查的目的，我发现这是非常有用的。

<pre>
  {JSON.stringify(this.props.message,null,2)}
</pre>