Блог

Я извлекаю данные из службы 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]
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>
  

Но я получаю сообщение об ошибке, в котором говорится, что я не могу работать map дальше message . Как я могу отобразить данные в объекте? Нужно ли мне сохранять его каким-либо другим способом? Как мне перебирать объекты для их рендеринга?

Обновление: я думаю, что ваша проблема заключается только в том, что 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>