генераторные компоненты через итерации

Question

Что-то странное происходит:
Это мое начальное состояние (а .js файл)

import moment  from 'moment'; 

let date = moment(); 
var previousDate = moment("2015-12-25"); 

export const projects = [ 
     { 
     "id": 0, 
     "metadata": { 
      "fields": 
      [{ 
       "id":  1, 
       "order": 1, 
       "name": "Name", 
       "value": "Collection 1" 
      }, 
      { 
       "id":  2, 
       "order": 2, 
       "name": "Created On", 
       "value": date 
      }, 
      { 
       "id":  3, 
       "order": 3, 
       "name": "Last Modified On", 
       "value": previousDate 
      }, 
      { 
       "id":  4, 
       "order": 4, 
       "name": "Status", 
       "value": "Filed" 
      }], 

      "tags": 
      [{ 
       "id":  1, 
       "order": 1, 
       "value": "tag1" 
      }, 
      { 
       "id":  2, 
       "order": 2, 
       "value": "tag2" 
      }, 
      { 
       "id":  3, 
       "order": 3, 
       "value": "tag3" 
      }, 
      { 
       "id":  4, 
       "order": 4, 
       "value": "tag4" 
      }] 
     } 
     } 

Это ProjectsList.js:

import React   from 'react'; 
import Project  from './Project'; 
import { projects } from 'initialState'; 

export default (props) => { 
    return(
    <div className="projectsList"> 
     {projects.map(project => (
     <article key={project.id}><Project fields={project.metadata.fields} /></article> 
    ))} 
    </div> 
) 
} 

И это одна-х Project.js:

import React from 'react'; 

export default (props) => { 
    return(
    <ul className="fields"> 
     {props.fields.map(field => <li key={field.id}>{field.name}</li>) } 
    </ul> 
) 
} 

Я пытаюсь сделать кучу проектов в списке, и каждый проект содержит кучу пар ключ-значение метаданных, которые он показывает.

Так что в принципе, проводка не имеет значения, все работает нормально.
за исключением этого:

Если посмотреть на исходном состоянии файл (первый один там), есть массив из нескольких объектов в fields. Каждый объект показывает 4 пары ключ-значение

• ID
• заказ
• имя
• значение

Теперь в Project.js, линия, куда я иду

{props.fields.map(field => <li key={field.id}>{field.name}</li>) } 

похоже, я могу переключить {field.name} f или {field.id}, чтобы показать идентификатор в тексте. Или я могу пойти {field.order}, чтобы отобразить заказ.

Но, как ни странно, если я хочу показать фактическое значение поля, вот так {field.value}, он бросает.

invariant.js?4599:38

Uncaught Invariant Violation: Objects are not valid as a React child (found: Mon Jun 20 2016 21:40:33 GMT-0400). 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 `StatelessComponent`. 

Я даже зашел так далеко (Вздох) как изменение строки value в каждом fields к val, Juste, чтобы убедиться, что value не был какой-то зарезервированное слово.

Еще бросил.

Кто-нибудь может помочь мне понять, что я сделал не так, здесь?
Спасибо, ребята.

Answer 1

Вы присваиваете значения переменных в value свойства в вашем файле состояния, которые скорее всего, не строки, а объекты:

export const projects = [{ 
    "id": 0, 
    "metadata": { 
     "fields": 
     [ 
     ... 
     { 
      "id":  2, 
      "order": 2, 
      "name": "Created On", 
      "value": date     // one 
     }, 
     { 
      "id":  3, 
      "order": 3, 
      "name": "Last Modified On", 
      "value": previousDate   // and another one 
     }, 
     ... 
     ] 
    ...  
    } 
} 

Answer 2

Если typeof children возвращает "object" (и children не является ни массивом, ни ReactElement), он бросает: https://github.com/facebook/react/blob/dc6fc8cc0726458a14f0544a30514af208d0098b/src/shared/utils/traverseAllChildren.js#L169

Вот простой пример, чтобы продемонстрировать это:

const IllegalComponent =() => <span>{{}}</span> 

Предполагается, что вы должны указать строку (или номер), чтобы React мог встроить ее в качестве дочерних элементов в <li>. Дети должны быть чем-то визуализируемым и реализовывать ReactNode.

Если дети являются объектом, React не знал, как его отобразить. Вы должны явно преобразовать значение в String.

Попробуйте это, чтобы увидеть, если он работает:

{props.fields.map(field => <li key={field.id}>{field.value.toString()}</li>) }