React Native-将Flatlist项目传递给Modal

Question

我正在尝试将特定项目从我的平面清单传递到我的模态。 但是，每当我尝试输出时，尽管我的其他状态都正确地传递给了我的Modal，但作为“价格”的特定项目却没有传递。 我不确定自己在做错什么，因为有时为了删除其他数据并保持价格，我试图将其删除，只有这个项目保留在我的代码中，当我运行并测试我的输出时，仍然存在没有传递的价格。

这是我的代码

Details.js

export default class Dishes extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      data: [],
      tbl: this.props.navigation.state.params.tbl,
      orderDet: this.props.navigation.state.params.orderDet,
      DineIn: this.props.navigation.state.params.DineIn,
      TakeOut: this.props.navigation.state.params.TakeOut,
      id: null,
      price: null
    };
  }

  fetchData = async () => {
    const { params } = this.props.navigation.state;
    const response = await fetch(
      "http://192.168.254.104:3307/categories/" + params.id + params.price
    );
    const json = await response.json();
    this.setState({ data: json });
  };

  componentDidMount() {
    this.fetchData();
  }

  _onPressItem = (id, price) => {
    this.setState({
      modalVisible: true,
      id: id,
      price: price
    });
  };

  _renderItem = ({ item, index }) => {
    return (
      <TouchableOpacity
        id={item.cat_id}
        price={item.menu_price}
        onPress={() => this._onPressItem(item.menu_desc)}
      >
        <View>
          <View>
            <Text>Name: {item.menu_desc} </Text>
            <Text>Price: ₱{item.menu_price} </Text>
          </View>
          <View>
            <Text>Available: {item.menu_status} </Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  render() {
    const { params } = this.props.navigation.state;
    return (
      <View>
        <View>
          <Text>Table No: {this.state.tbl}</Text>
          <Text>Order No: {this.state.orderDet}</Text>
          <Text>
            {this.state.DineIn}
            {this.state.TakeOut}
          </Text>
        </View>
        <FlatList
          renderItem={this._renderItem}
          // ...
        />
        <ModalScreen
          modalVisible={this.state.modalVisible}
          setModalVisible={vis => {
            this.setState({ modalVisible: vis });
          }}
          id={this.state.id}
          price={this.state.price} // price
          tbl={this.state.tbl}
          orderDet={this.state.orderDet}
          DineIn={this.state.DineIn}
          TakeOut={this.state.TakeOut}
        />
      </View>
    );
  }
}

ModalScreen.js

export default class ModalScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: props.modalVisible,
      id: null,
      price: null,
      discount: "0.00",
      amount: "0.00",
      orderStat: "UNPAID"
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      modalVisible: nextProps.modalVisible,
      id: nextProps.id,
      price: nextProps.price,
      tbl: nextProps.tbl,
      orderDet: nextProps.orderDet,
      DineIn: nextProps.DineIn,
      TakeOut: nextProps.TakeOut
    });
  }

  render() {
    return (
      <Modal
        animationType="slide"
        transparent={true}
        visible={this.state.modalVisible}
        onRequestClose={() => {
          this.props.setModalVisible(false);
        }}
      >
        <View>
          <View>
            <Text>Discount: {this.state.discount}</Text>
            <Text>Amount: {this.state.amount}</Text>
            <Text>Table No: {this.state.tbl}</Text>
            <Text>Order No: {this.state.orderDet}</Text>
            <Text>
              {this.state.DineIn}
              {this.state.TakeOut}
            </Text>
            <Text>Name: {this.state.id}</Text>
            <Text>Price: ₱{this.state.price}</Text> // Here's the price
          </View>
          ....
        </View>
      </Modal>
    );
  }
}

Details_screen_shot

Modal_screen_shot

Answer 1

在_onPressItem函数中，您有两个参数，分别是菜单项和价格。

但是，在您的renderItem函数中

<TouchableOpacity
  id={item.cat_id}
  price={item.menu_price}
  onPress={() => this._onPressItem(item.menu_desc)}
>

您只能将项目菜单参数传递给它。

试试这个代码，让我知道它是否有效

<TouchableOpacity
  id={item.cat_id}
  price={item.menu_price}
  onPress={() => this._onPressItem(item.menu_desc, this.state.price)}
>