如何使用模态仅获得一个值

问题描述

我正在使用Modal，但是有一个问题，使用Modal，我从name获得了所有About，但是没有，我只有一个值。我只需要使用Modal取一个值

import React,{ Component } from "react";
import { Text,View } from "react-native";
import Modal from "react-native-modal";

export default class App extends Component {
  state = {
    visible: false
  };

  renderMap() {
    const About = [
      {
        name: "Gabe",msg: "Hello",img: "Some Img"
      },{
        name: "Amanda",msg: "Hi",img: "Another img"
      },{
        name: "Cauã",msg: "Whats up ",img: "Another img"
      }
    ];

    const Choose = About.map((info) => {
      return (
        <View style={{ width: 180,backgroundColor: "red",marginTop: 10 }}>
          <Text
            onPress={() => {
             // console.log(info.name); 
            // delete the MODAL and try out this only with the console.log
              this.setState({
                visible: true
              });
            }}
          >
            Click on the Title
          </Text> 

          <Modal isVisible={this.state.visible}>{console.log(info.name)}</Modal>

        </View>
      );
    });

    return Choose;
  }

  render() {
    return <View>{this.renderMap()}</View>;
  }
}

查看完整的project

您看到了吗？没有Modal，我在console.log（）上得到了确切的值，但是有了Modal，我得到了三个值。我需要使用Modal获得价值的东西

解决方法

好的方法

import React,{ Component } from "react";
import { Text,View } from "react-native";
import Modal from "react-native-modal";

export default class App extends Component {
  state = {
    visible: false,userInfos: null
  };

renderMap() {
    const About = [
      {
        name: "Gabe",msg: "Hello",img: "Some Img"
      },{
        name: "Amanda",msg: "Hi",img: "Another img"
      },{
        name: "Cauã",msg: "Whats up ",img: "Another img"
      }
    ];

    const Choose = About.map((info) => {
      return (
        <View style={{ width: 180,backgroundColor: "red",marginTop: 10 }}>
          <Text
            onPress={() => {
              this.setState({
                visible: true,userInfos: info
              });
            }}
          >
            Click on the Title
          </Text> 
        </View>
      );
    });

    return Choose;
  }

  render() {
    return(
        <View>
            {this.renderMap()}
            <Modal isVisible={this.state.visible}>
                <Text>{this.state.userInfos.name}</Text>
            </Modal>
        </View>
    )
  }
}