React Native 在组件之间传递数组

Posted 2023-02-23

【中文标题】React Native 在组件之间传递数组

【英文标题】：React Native passing array between components

【发布时间】：2017-03-11 14:35:19

【问题描述】：

我正在尝试将一组数字从一个子组件传递到另一个子组件。我相信这样做的方法是通过他们的父文件。

第一个 child-generateButton 仅在 onPress 上生成一个由 3 个随机数组成的数组

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; 

Parent-main 使用这个将状态 randomGenres 的值更改为 generateButton 返回的值，然后将此状态传递给第二个子 Genre

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;

最终，它会通过查找类型数组的随机元素并显示它们而不仅仅是数字，将随机数转换为随机类型。但是我似乎无法在组件之间传递数组

我的错误：元素类型无效：应为字符串或类/函数，请检查 main 的渲染方法

只有在取消注释该行时才会发生这种情况：

<Genre randomGenres=this.state.randomGenres/>

我认为我的错误在于 Genre 如何接收存储在 randomGenres 中的数组

我尝试使用 propTypes 设置道具的数据类型，但没有运气，任何帮助将不胜感激！

【问题讨论】：

在组件Genre中，属性styles被传递给View。那应该是style。检查改变是否能让你前进。使用 propTypes 不会改变 props，它仅用于验证。

谢谢，已修复，但没有进一步解决，不幸的是同样的错误

你检查天气changeRandoms 被子组件调用了吗？尝试将该函数中的newRandoms 输出到您的控制台中。在下面的代码<GenerateButton onPress=this.changeRandoms/>中，不需要绑定this吗？ <GenerateButton onPress=this.changeRandoms.bind(this)/>这里也一样：<TouchableHighlight onPress=this.generateRandoms.bind(this)

试过了，谢谢！ React 会自动绑定，所以有人告诉我，我的 generateButton 实际上会生成一个随机数数组，我可以在控制台上看到这些随机数。谢谢我现在知道问题不在于 changeRandom 而是在于 Genre 如何接受 randomGenres。旁白，在第一次单击 generateButton 时在我的控制台输出上，它在第一次单击时输出 initialState 而不是 newRandoms

@Mila，将 this 绑定到类方法的需要通常与使用 ES6 类表示法而不是 React.createClass 相关联，其中 this 的范围更有可能发生变化

【参考方案1】：

编辑： 在 Genre 组件的渲染方法中，您使用属性 styles 而不是 style 删除它应该可以修复 你的错误：

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 值应该会产生正确的结果

【讨论】：

感谢您的彻底回复，您的编辑不会改变我代码的最终输出，它仍然会生成随机数并在第二次单击时在控制台中打印它们，在第一次单击时会打印初始状态由于一些未知的原因。我仍然收到元素类型无效错误，所以问题仍然存在于流派以及它是如何传递随机流派的。你的编辑是为了正确的编码练习吗？就像我不应该在子级内部生成数字或函数，而应该只从父级传递它们？

在我的 changeRandom 或您的 generateRandom 函数中

我认为你在调用 console.log 在调用 this.setState 之后？另外：我建议先修复错误。也许问题出在您的样式文件中？如果您将它们与您的文件结构的描述一起添加到原始问题中会有所帮助。

是的，在 this.setState 之后调用 console.log，将更新我的原始帖子，但我认为在我调用 <Genre> 之前不会有任何错误

这个答案是完全错误的。 changeRandoms确实收到newRandoms。通过 onPress 属性传递给GenerateButton 的是changeRandoms 的函数definition，它使用数组作为参数从GenerateButton 组件内部调用。 @KinectDeveloper23 你想要输出的是状态 after setState 已经 executed，例如在setState 的回调中。见setState。