React Собственный передающий массив между компонентами

Question

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

Первый ляющих generateButton просто генерирует массив случайных чисел 3 onPress

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    TouchableHighlight, 
    Text, 
    View 
} from 'react-native'; 
import styles from '../styles/styles'; 


var GenerateButton = React.createClass({ 

    generateRandoms: function() { 
    let randomNumbers = [Math.random(), Math.random(), Math.random()]; 
    this.props.onPress(randomNumbers); 
    }, 

    render: function(){ 
    return (
     <TouchableHighlight 
     onPress={this.generateRandoms} 
     style={styles.generateButton}> 
      <Text style={styles.generateButton}>Generate!</Text> 
     </TouchableHighlight> 
    ); 
    } 
}); 

module.exports = GenerateButton; 

Основной использует родительский, чтобы это изменить значение государственных randomGenres до значения, возвращаемого generateButton, это состояние затем передается 2-й ребенок Жанр

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import { 
Genre 
} from './genreSelector'; 
import GenerateButton from './generateButton'; 
import styles from '../styles/styles'; 

var Main = React.createClass ({ 

    propTypes: { 
    randomGenres: React.PropTypes.array, 
    newRandoms: React.PropTypes.array 
    }, 

    getInitialState: function() { 
    return { randomGenres: [4,7,19]}; 
    }, 

    changeRandoms: function (newRandoms) { 
    this.setState({ 
     randomGenres: newRandoms 
    }); 
    }, 

    render(){ 
    return (
    <View style={styles.container}> 
    <Text style= {styles.title}>Genre Generator</Text> 
    <Text style={styles.h2}>I am listening to</Text> 
    <View style={styles.genreContainer}> 
     <Genre randomGenres={this.state.randomGenres}/> 
    </View> 
    <Text style={styles.h2}>You filthy casual</Text> 
    <GenerateButton onPress={this.changeRandoms}/> 

    </View> 
    ); 
} 
}); 

module.exports = Main; 

Второй ляющий жанр, в этот момент все, что я хочу, чтобы это сделать, это получить randomGenres как опора и сделать три значения

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import{ 
    genre1, 
    genre2, 
    genre3 
} from './genres.js'; 
import styles from '../styles/styles'; 

var Genre = React.createClass({ 

    render: function(){ 
    var randomGenres = this.props.randomGenres; 

    return (
     <View styles={styles.genreContainer}> 
      <Text >{randomGenres[0]}</Text> 
      <Text >{randomGenres[1]}</Text> 
      <Text >{randomGenres[2]}</Text> 
     </View> 
     ); 
    } 
}); 

module.exports = Genre; 

В конце концов он преобразует случайные числа в случайные жанры, набирая случайный элемент массива жанров и отображая их вместо чисел. Однако я не могу передать массив между компонентами

Моя ошибка: Тип элемента недействителен: ожидается строка или класс/функция, проверьте метод визуализации главного

Это происходит только, когда это линия раскомментирована:

<Genre randomGenres={this.state.randomGenres}/>

Я считаю, что моя ошибка заключается в том, как Genre принимает массив, хранящийся в randomGenres

Я попытался установить тип данных опора с помощью propTypes, но не повезло, любая помощь будет принята с благодарностью!

Answer 1

EDIT:
Within the render method of your Genre component you use the attribute styles instead of style
Removing it should fix your error:

import React, { Component } from 'react'; 
... 
var Genre = React.createClass({ 

    render: function(){ 
    var randomGenres = this.props.randomGenres; 

    return (
     <View style={styles.genreContainer}> 
... 
     </View> 
     ); 
    } 
}); 

module.exports = Genre; 

Как комментарий Nifi в деталях ниже: метод SetState принимает функцию обратного вызова в качестве необязательного второго аргумента, который запускается один раз SetState завершен. Прихват значения randomNumbers здесь должен привести к правильному результату