React Native-将平面列表项传递给Modal

Question

我正试图将一个特定项目从Flatlist传递到Modal。但每当我尝试输出时，作为我的"价格"的这个特定项目都不会通过，尽管我的其他状态正在正确地传递到我的Modal。我不确定我做错了什么，因为有时，为了尝试，我删除了其他数据，只保留价格——只有这个项目保留在我的代码中，当我运行和测试我的输出时，仍然没有通过价格。

这是我的代码

详细信息.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)}
>