在屏幕之间导航时如何防止状态重置？反应原生

Question

在 react native 应用程序中，我有一个主屏幕和第二个屏幕，用户可以使用它来添加应在主屏幕上显示的项目。问题是当我在第二个屏幕中添加项目并转到主屏幕时，我可以看到添加的项目，但是当我再次进入第二个屏幕添加其他项目时，它会删除以前添加的项目。

任何帮助解释为什么会发生这种情况以及如何处理它？ 提前致谢 这是应用程序的代码。

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="AddItem" component={AddItem} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

这是主屏幕组件

class Home extends Component {
  render() {
    const { expenseList } = this.props.route.params || '';
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Budget:</Text>
        <Button
          title="+"
          onPress={() => this.props.navigation.navigate('AddItem')}
        />
        <View>
          {expenseList === '' && (
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('AddItem')}>
              <Text>Create your first entry</Text>
            </TouchableOpacity>
          )}
          {expenseList !== '' && (
            <FlatList
              style={styles.listContainer}
              data={expenseList}
              renderItem={(data) => <Text> title={data.item.name} </Text>}
            />
          )}
        </View>
      </View>
    );
  }
}

和第二个屏幕

class AddItem extends Component {
  state = {
    name: '',
    amount: '',
    expenseList: [],
  };

  submitExpense = (name, amount) => {
    this.setState({
      expenseList: [
        ...this.state.expenseList,
        {
          key: Math.random(),
          name: name,
          amount: amount,
        },
      ],
    });
  };

  deleteExpense = (key) => {
    this.setState({
      expenseList: [
        ...this.state.expenseList.filter((item) => item.key !== key),
      ],
    });
  };
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          onChangeText={(name) => this.setState({ name })}
          value={this.state.name}
          placeholder="Name"
          keyboardType="default"
        />
        {this.state.name === '' && (
          <Text style={{ color: 'red', fontSize: 12, paddingLeft: 12 }}>
            Name is required
          </Text>
        )}
        <TextInput
          style={styles.input}
          onChangeText={(amount) => this.setState({ amount })}
          value={this.state.amount}
          placeholder="Amount"
          keyboardType="numeric"
        />
        {this.state.amount === '' && (
          <Text style={{ color: 'red', fontSize: 12, paddingLeft: 12 }}>
            Amount is required
          </Text>
        )}
        
        <Button
          title="Add"
          style={styles.btn}
          onPress={() => {
            if (
              this.state.name.trim() === '' ||
              this.state.amount.trim() === ''
            ) {
              alert('Please Enter the required values.');
            } else {
              this.submitExpense(
                this.state.name,
                this.state.amount
              );
            }
             
          }}
        />
        <Button
        title="Go to Dashboard"
          style={styles.btn}
        onPress = {() => { this.props.navigation.navigate("Home", {
                expenseList: this.state.expenseList,
              });}}
        />
        <FlatList
          style={styles.listContainer}
          data={this.state.expenseList}
          renderItem={(data) => <Text> title={data.item.name} </Text>}
        />
      </View>
    );
  }
}

Answer 1

你有几个选择：

1- 使用 Redux：

https://react-redux.js.org/using-react-redux/connect-mapstate

2- 将您的状态保存在 AsyncStorage 中，然后随时随地获取

3- 在路由中将您的状态作为参数传递：

navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });