Question

我是React Native的新手。我正在制作一个午餐选择器应用程序进行练习，我想知道如何将状态数组传递给另一个类。我想做的是：在子屏幕上显示数组的所有数据，以便用户可以通过单击按钮来检查数据。但是，似乎我的代码返回空数组而不是获取原始数组。所有代码都在一个文件App.js中

主屏幕

class HomeScreen extends React.Component {
//initial
constructor(props) {
  super(props);
  this.state = {
    isReady: false,
    myMenu: '????',
    menutext: '',
    randomArray: ['a', 'b', 'c'],
  };
}

render() {


    return (
      <View style={[styles.mainContainer]}>
        <DetailsScreen menuListAA={this.state.randomArray} />
        <Button
          label="Show all menu"
          onPress={() => {
            /* 1. Navigate to the menu page route with params */
            this.props.navigation.navigate('Details', {
              itemId: 0,
              otherParam: 'Show all menu',
            });
          }}
        />

      </View>

详细信息屏幕

class DetailsScreen extends React.Component {


  constructor(props) {
    super(props);
    this.state = {

    }
  }
  static navigationOptions = {
    title: 'All menu',
  };

loadMenuList() {
  const allMenuList = this.props.menuListAA;
  return allMenuList.map((item, index) => <Text key={index}>{item}</Text>);

}

  render() {

    return (
      <ScrollView>


        <View style={styles.row}>{this.props.menuListAA}</View>

        <Button
          label="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </ScrollView>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {

  render() {
    return <AppContainer />;
  }
}

让我知道是否需要更多信息。

Answer 1

请使用以下代码替换您的代码：

主屏幕

class HomeScreen extends React.Component {
//initial
constructor(props) {
  super(props);
  this.state = {
    isReady: false,
    myMenu: '????',
    menutext: '',
    randomArray: ['a', 'b', 'c'],
  };
}

render() {


    return (
      <View style={[styles.mainContainer]}>
        <DetailsScreen menuListAA={this.state.randomArray} />
        <Button
          label="Show all menu"
          onPress={() => {
            /* 1. Navigate to the menu page route with params */
            this.props.navigation.navigate('Details', {
              itemId: 0,
              otherParam: 'Show all menu',
            });
          }}
        />

      </View>

问题详情：将View替换为Text组件

class DetailsScreen extends React.Component {


  constructor(props) {
    super(props);
    this.state = {

    }
  }
  static navigationOptions = {
    title: 'All menu',
  };

loadMenuList() {
  const allMenuList = this.props.menuListAA;
  return allMenuList.map((item, index) => <Text key={index}>{item}</Text>);

}

  render() {

    return (
      <ScrollView>

//change View with Text as view cannot render characters and error says the same

        <Text style={styles.row}>{this.props.menuListAA}</Text>

        <Button
          label="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </ScrollView>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {

  render() {
    return <AppContainer />;
  }
}

Answer 2

您可以通过为子组件设置道具，将数据从父对象传递给子对象，例如：<Child data={this.state.yourData} /> //the props name is data，然后在componentWillMount()的子组件中可以访问它：

ComponentWillMount(){ 
    this.setState({childData: this.props.data}) // childData is an state of child component,rename it to your own` 
}

在某些情况下，数据可能会更改，因此我们必须在componentDidUpdate()中进行检查：

componentDidUpdate(){
     if(this.props.data != this.state.childData){ //it is necessary because this function called many time's 
            this.setState({childData: this.props.data})
}

如果您是父母，并且想提供孩子的任何数据，则必须传递一个返回数据的函数，如下所示：

<Child getData={(value)=> console.log(value)} />

然后在您的孩子中可以执行以下操作：

this.props.getData(anyDataYouWantGetInParent)

希望这个答案会有所帮助，让我知道任何问题祝你好运。

将数组状态传递给另一个类做出反应

2 个答案: