我不能将多个状态项传递到其他屏幕？

Question

提前感谢阅读。

我正在处理的这个 React Native 项目中有 2 个屏幕。一个是“输入”屏幕，我在其中输入了一些文本以从用户那里收集数据。另一个是“输出”屏幕，它只是在屏幕上显示用户在“输入”屏幕上输入的文本。

我一开始只在“输入”屏幕上输入一个文本，然后我能够将其发送到“输出”屏幕并成功显示。

当我想在“输入”屏幕上添加更多文本输入时出现问题，因为我需要更多数据。

一旦我这样做并尝试发送所有数据（而不是只发送最初的一条数据），出于某种原因而不是成功检索所有 3 条数据，只有在“输出”屏幕上成功显示的数据是 我在按下提交之前输入的最后一个输入。

这是输入屏幕：

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 个组件

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;

我不能将多个状态项传递到其他屏幕？

I can't pass multiple state items to other screen?

javascript

reactjs

react-native

react-navigation