從子組件反應本機更新父數組

Question

我在更新作為道具傳遞到我的子組件中的數組時遇到問題。 我四處搜索但沒有找到可以直接解決我的問題的答案。 我的代碼如下：

應用程序.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


import AddMedication from "./src/AddMedication";
import MedicationList from './src/MedicationList';

const Stack = createNativeStackNavigator();

export default class App extends Component   {
  constructor(props) {
    super(props);
    this.state = {
      medications: [],
    }

    this.addMedication = this.addMedication.bind(this);
  } 

  addMedication = (name, dosage, measurement, timesDaily) => {
    console.log("Medication added.")
    var newItem = {name: name, dosage: dosage, measurement: measurement, timesDaily: timesDaily}
    this.setState({
      medications: [...this.state.medications, newItem]
    })
  }

  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Medication List">
            {(props) => <MedicationList {...props} medications={this.state.medications} />}
          </Stack.Screen>
          <Stack.Screen name="Add New Medication">
            {(props) => <AddMedication {...props} addMedication={this.addMedication} />}
          </Stack.Screen>
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

這是我試圖顯示數組但沒有顯示 MedicationList.js 的主屏幕

class MedicationList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['Name', 'Dosage', 'Times Daily', 'Prescriber', 'For Diagnosis'],
    }
  }

  medication = ({ item }) => {
    <View style={{ flexDirection: 'row' }}>
      <View style={{ width: 50, backgroundColor: 'lightyellow'}}>
          <Text style={{ fontSize: 16, fontWeight: 'bold', textAlign: 'center'}}>{item.name}</Text>
      </View>
      <View style={{ width: 400, backgroundColor: 'lightpink'}}>
          <Text style={{ fontSize: 16, fontWeight: 'bold' , textAlign: 'center'}}>{item.dosage}{item.selectedMeasurement}</Text>
      </View>
      <View style={{ width: 400, backgroundColor: 'lavender'}}>
          <Text style={{ fontSize: 16, fontWeight: 'bold' , textAlign: 'center'}}>{item.timesDaiy}</Text>
      </View>
    </View>
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: '10%'}}>
        <Button
          title="+ Add New Medication"
          onPress={() => {
            /* 1. Navigate to the Details route with params */
            this.props.navigation.navigate('Add New Medication', {
              medications: this.props.medications,
            });
          }}
        />
        <FlatList 
          data={this.props.medications} 
          renderItem={this.medication}  
        />
      </View>
    );
  }
}

這是我單擊添加按鈕以更新葯物數組 AddMedication.js 的地方

class AddMedication extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      dosage: 0,
      selectedMeasurement: "mg",
      timesDaily: '',
      prescriber: '',
      forDiagnoses: '',
      instructions: '',
      validity: false,
    };

  }

  setName = (name) => {
    let isValid = this.isFormValid();
    this.setState({ name: name, validity: isValid });
  }

  setDosage = (dosage) => {
    let isValid = this.isFormValid();
    this.setState({ dosage: dosage, validity: isValid });
  }

  setMeasurement = (measurement) => {
    this.setState({ selectedMeasurement: measurement });
  }

  setTimesDaily = (timesDaily) => {
    let isValid = this.isFormValid();
    this.setState({ timesDaily: timesDaily, validity: isValid });
  }

  setPrescriber = (prescriber) => {
    this.setState({ prescriber: prescriber });
  }

  setDiagnoses = (diagnoses) => {
    this.setState({ forDiagnoses: diagnoses });
  }

  setInstructions = (instructions) => {
    this.setState({ instructions: instructions });
  }

  isFormValid = () => {
    return (this.state.name !== '' && (this.state.dosage !== '' && this.state.dosage > 0) 
            && (this.state.timesDaily !== '' && this.state.timesDaily > 0));
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={{color: 'red', marginBottom: 5, marginLeft: -125}}>* denotes required field</Text>
        <View style={{flexDirection: 'row'}}>
          <Text style={styles.required}>*</Text>
          <TextInput
            style={styles.inputText}
            onChangeText={(name) => this.setName(name)}
            placeholder="Medication Name"
            value={this.state.name}
          />
        </View> 
        <View style={{flexDirection: 'row'}}>
          <Text style={styles.required}>*</Text>
          <TextInput
            style={styles.inputText}
            onChangeText={(dosage) => this.setDosage(dosage)}
            placeholder="Dosage"
            value={this.state.dosage}
          />
        </View>
        <View style={styles.dosageContainer}>
          <Text style={{flex: 1, marginTop: 100, marginLeft: 30}}>
          Select Measurement:
          </Text>
          <Picker 
            style={styles.picker}
            selectedValue={this.state.selectedMeasurement}
            onValueChange={(itemValue, itemIndex) => 
              this.setMeasurement(itemValue)
            }>
            <Picker.Item label="mg" value="mg" />
            <Picker.Item label="g" value="g" />
            <Picker.Item label="ml" value="ml" />
          </Picker>
        </View>
        <View style={{flexDirection: 'row'}}>
          <Text style={styles.required}>*</Text>
          <TextInput
            style={styles.inputText}
            onChangeText={(timesDaily) => this.setTimesDaily(timesDaily)}
            placeholder="Times daily"
            value={this.state.timesDaily}
          />
        </View>
        <TextInput
          style={styles.inputText}
          onChangeText={(prescriber) => this.setPrescriber(prescriber)}
          placeholder="Prescriber"
          value={this.state.prescriber}
        />
        <TextInput
          style={styles.inputText}
          onChangeText={(diagnoses) => this.setDiagnoses(diagnoses)}
          placeholder="For diagnoses"
          value={this.state.forDiagnoses}
        />
        <TextInput
          style={styles.inputText}
          onChangeText={(instructions) => this.setInstructions(instructions)}
          placeholder="Instructions"
          value={this.state.instructions}
        />
        <TouchableOpacity 
          style={this.isFormValid() ? styles.validButton : styles.invalidButton}
          disabled={!Boolean(this.state.name && this.state.dosage && this.state.timesDaily)}
          onPress={() => { 
            this.props.navigation.goBack()
            this.props.addMedication(this.state.name, this.state.dosage, 
                                     this.state.selectedMeasurement, this.state.timesDaily) 
          }}
        >
          <Text style={{color: 'white'}}>Add Medication</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

Answer 1

您可以傳遞 state 值，但我認為您不能像這樣傳遞 addMedication 方法。

您能否嘗試傳遞一個使用 setState 方法的箭頭 function？

例如：

<Stack.Screen name="Add New Medication">
        {(props) => <AddMedication {...props} addMedication={(name, dosage, measurement, timesDaily)=> {this.addMedication(name, dosage, measurement, timesDaily)}} />}
</Stack.Screen>