我无法将多个状态项传递到其他屏幕？

Question

提前感谢您的阅读。

我在这个react native项目中有2个屏幕，我正在工作。一个是"输入";屏幕，其中我有一些文本输入来收集来自用户的数据。另一个是"输出"。屏幕，它只是在屏幕上显示用户在"输入"上输入的文本。屏幕。

一开始我只在"input"上输入一个文本。屏幕，然后我可以将其发送到"输出"。屏幕显示并成功显示

当我想在"input"上添加更多文本输入时，问题出现了。因为我需要更多的数据。

一旦我这样做了，并试图发送所有的数据(而不是只发送最初的一块数据)，由于某种原因，而不是成功检索所有3块数据，是唯一成功显示在"输出"上的数据。屏幕是我在按submit之前键入的最后一个输入.

输入屏幕:

import { Text, StyleSheet, View, TextInput, Button } from "react-native";

export default class InputScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
home: {
h1: "",
h2: "",
h3: "",
h4: "",
h5: "",
h6: "",
h7: "",
h8: "",
h9: "",
h10: "",
h11: ""
},
away: {
a1: "",
a2: "",
a3: "",
a4: "",
a5: "",
a6: "",
a7: "",
a8: "",
a9: "",
a10: "",
a11: ""
}
};
}
static navigationOptions = {
title: "Input",
headerStyle: {
backgroundColor: "red"
},
headerTitleStyle: {
fontWeight: "bold"
}
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<TextInput 
value={this.state.home.h1}
onChangeText={inputtedValue => this.setState({...this.state, home: {h1: inputtedValue}})}
placeholder="Enter your first home fake iMessage here"
style={styles.textInput}
/>
<TextInput 
value={this.state.home.h2}
onChangeText={inputtedValue => this.setState({...this.state, home: {h2: inputtedValue}})}
placeholder="Enter your second home fake iMessage here"
style={styles.textInput}
/>
<TextInput 
value={this.state.home.h3}
onChangeText={inputtedValue => this.setState({...this.state, home: {h3: inputtedValue}})}
placeholder="Enter your third home fake iMessage here"
style={styles.textInput}
/>
<View style={styles.buttonStyle}>
<Button
title="Submit"
onPress={() => 
this.props.navigation.navigate('Output', {
h1: this.state.home.h1,
h2: this.state.home.h2,
h3: this.state.home.h3,
otherParam: '101'
})
}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({  
container: {  
flex: 1,  
backgroundColor: '#fff',  
alignItems: 'center',  
padding: 16,  
},  
textInput: {  
height: 45,width: "95%",borderColor: "gray",borderWidth: 1,fontSize:20,  
},  
buttonStyle:{  
width: "93%",  
marginTop: 50,  
backgroundColor: "red",  
}  
});  

下面是输出屏幕:

import React from "react";
import { Text, View, Button, StyleSheet } from "react-native";

export default class OutputScreen extends React.Component {
static navigationOptions = {
title: "Ouput",
headerStyle: {
backgroundColor: "green"
},
headerTitleStyle: {
fontWeight: "bold"
}
};
render() {
const { navigation } = this.props;
const home_message_one = navigation.getParam("h1", "no message");
const home_message_two = navigation.getParam("h2", "no message");
const home_message_three = navigation.getParam("h3", "no message");
const home_message_four = navigation.getParam("h4", "no message");
const home_message_five = navigation.getParam("h5", "no message");
const home_message_six = navigation.getParam("h6", "no message");
const home_message_seven = navigation.getParam("h7", "no message");
const home_message_eight = navigation.getParam("h8", "no message");
const home_message_nine = navigation.getParam("h9", "no message");
const home_message_ten = navigation.getParam("h10", "no message");
const home_message_eleven = navigation.getParam("h11", "no message");
const other_param = navigation.getParam("otherParam", "some default value");
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text style={{ marginTop: 16,fontSize: 20,}}>
This is output screen and we recieve value from input screen
</Text>
<Text style={styles.textStyle}>Home Message One: {JSON.stringify(home_message_one)}</Text>
<Text style={styles.textStyle}>Home Message Two: {JSON.stringify(home_message_two)}</Text> 
<Text style={styles.textStyle}>Home Message Two: {JSON.stringify(home_message_three)}</Text>      
<Text style={styles.textStyle}>Home Message Four: {JSON.stringify(home_message_four)}</Text> 
<Text style={styles.textStyle}>Home Message Five: {JSON.stringify(home_message_five)}</Text> 
<Text style={styles.textStyle}>Home Message Six: {JSON.stringify(home_message_six)}</Text> 
<Text style={styles.textStyle}>Home Message Seven: {JSON.stringify(home_message_seven)}</Text> 
<Text style={styles.textStyle}>Home Message Eight: {JSON.stringify(home_message_eight)}</Text> 
<Text style={styles.textStyle}>Home Message Nine: {JSON.stringify(home_message_nine)}</Text> 
<Text style={styles.textStyle}>Home Message Ten: {JSON.stringify(home_message_ten)}</Text> 
<Text style={styles.textStyle}>Home Message Eleven: {JSON.stringify(home_message_eleven)}</Text> 
{/* <Text style={styles.textStyle}>Other Param: {JSON.stringify(other_param)}</Text> */}
<View style={styles.buttonStyle}>
<Button 
title="Go back"
onPress={() => this.props.navigation.goBack()}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({  
textStyle: {  
fontSize: 23,  
textAlign: 'center',  
color: '#f00',  
},  
buttonStyle:{  
width: "93%",  
marginTop: 50,  
backgroundColor: "red",  
}  
});  

谁能帮助我理解为什么所有3块数据都没有成功显示，而只是我在按提交之前输入的最后一个文本输入的数据?我需要创建一个表单或其他东西吗?

谢谢,马克。

Answer 1

每个输入都覆盖嵌套状态。

onChangeText={inputtedValue => this.setState({
...this.state,
home: {
h1: inputtedValue, // <-- drops h2, h3, h4, ...etc...
},
})}

React处理根属性的浅层合并，但不会更深，所以你需要浅层复制正在更新的嵌套状态。

<TextInput 
value={this.state.home.h1}
onChangeText={inputtedValue => this.setState(prevState => ({
home: {
...prevState.home, // <-- copies h2, h3, h4, ...etc...
h1: inputtedValue
},
}))}
placeholder="Enter your first home fake iMessage here"
style={styles.textInput}
/>

Answer 2

输入屏幕

import { Text, StyleSheet, View, TextInput, Button } from "react-native";

export default class InputScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
home: {
h1: "",
h2: "",
}
};
}

render() {
const { navigate } = this.props.navigation;
return (
<View>
<TextInput 
value={this.state.home.h1}
onChangeText={inputtedValue => this.setState({home: {...this.state.home,h1: inputtedValue}})}
/>
<TextInput 
value={this.state.home.h2}
onChangeText={inputtedValue => this.setState({home: {...this.state.home,h2: inputtedValue}})}
/>
<View>
<Button
title="Submit"
onPress={() => {
navigate('Output', {...this.state.home})
}}
/>
</View>
</View>
);
}
}

输出屏幕如果你使用类组件

class OutputScreen extends React.component{
constructor(props){}
render(){
const params = this.props.route.params;
return <Text>h1:{params?.h1} || h2: {params?.h2}</Text>
}
}
export default OutputScreen;

如果你使用功能组件

const OutputScreen = ()=>{
const route = useRoute();
const {params} = route;
return <Text>h1:{params?.h1} || h2: {params?.h2}</Text> 
}
export default OutputScreen;