React Native Picker onValueChange 问题

Question

我对 React Native 很陌生。我的组件只需 1 个选择器就可以正常工作。但是，在我添加了一个选择器之后，代码变得复杂了。

第二个选择器的数据取决于第一个选择器的选定值，因为我将该值作为参数放在 api url 上。每次用户更改第一个选择器的值时，我都尝试编写一个函数来触发第二个选择器。但现在即使是我的第一个选择器的onValueChange 也不起作用。您能帮我找到正确的解决方案吗？

代码：

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

import {Picker} from '@react-native-picker/picker';


const VeriGuncelleme = ({route}) => {
    
    const { responseData } = route.params;
    const {kullaniciBilgisi} = route.params; 

    var bolge = responseData.items[0].bolge; 
    var etiket_no = responseData.items[0].etiket_no;
    var marka = responseData.items[0].uretici;
    var model = responseData.items[0].model;
    var serino = responseData.items[0].serino;
    var ad_soyad = responseData.items[0].ad_soyad;
    var varlik_turu = responseData.items[0].varlik_turu;


    const [selectedValueMarka, setSelectedValueMarka] = useState(marka);
    const url_marka = "--url here--" +varlik_turu;

    
    var marka_arr_new=[];
    const [marka_arr, setMarkaArr] = useState([]);

      axios.get(url_marka) 
      .then(res => {
        
        for(var i =0; i<res.data.items.length; i++){
          marka_arr_new.push(res.data.items[i].d);
        }
    
        setMarkaArr(marka_arr_new);

      })


      const [selectedValueModel, setSelectedValueModel] = useState(model);


     
      var model_arr_new=[];
      const [model_arr, setModelArr] = useState([]);

      const AfterMarkaChange = (itemValue) =>{
        setSelectedValueMarka(itemValue);
        ModelGetir;
      }

      const url_model = " --url here-- "+varlik_turu+"/"+selectedValueMarka; //selectedValueMarka came from first picker

      const ModelGetir = () => {
      
        axios.get(url_model) 
         .then(res => {
         
         for(var i =0; i<res.data.items.length; i++){
         model_arr_new.push(res.data.items[i].d);
        }

         setModelArr(model_arr_new);

        })
      
      }


    return (

      <View style={styles.container}>
        <View >
           <Text style={{fontWeight:'bold', padding:8}}>Etiket No        :  {etiket_no}</Text>
           <Text style={{fontWeight:'bold', padding:8}}>Marka             :</Text>
           <Text style={{fontWeight:'bold', padding:8}}>Model             :</Text>
           <Text style={{fontWeight:'bold', padding:8}}>Seri No           :</Text>
           <Text style={{fontWeight:'bold', padding:8}}>Bölge              :</Text>
        </View>
        <View>
          <Picker 
            selectedValue={selectedValueMarka}
            style={{ height: 50, width: 150 }}
            onValueChange={AfterMarkaChange}>

            { marka_arr.map((value,index) => {
                 return <Picker.Item label={value} value={value} key={index} />}) }   

          </Picker>   
          <Picker
            selectedValue={selectedValueModel}
            style={{ height: 50, width: 150 }}
            onValueChange={(itemValue, itemIndex) => setSelectedValueModel(itemValue)}>

            { model_arr.map((value,index) => {
                 return <Picker.Item label={value} value={value} key={index} />}) }   

          </Picker>   
  
  
        </View>
    </View>
    );
  }
export default VeriGuncelleme;

Answer 1

您的代码的一个问题是设置状态是异步的。所以当你这样做时

      const AfterMarkaChange = (itemValue) =>{
        setSelectedValueMarka(itemValue);
        ModelGetir();
      }

当ModelGetir() 被执行时，您的 selectedValueMarka 仍然是旧值。对此进行编码的典型方法是使用 useEffect 并观察 selectedValueMarka 的变化。

应该是这样的：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';

import { Picker } from '@react-native-picker/picker';

const VeriGuncelleme = ({ route }) => {
  const { responseData } = route.params;
  const { kullaniciBilgisi } = route.params;

  const { bolge } = responseData.items[0];
  const { etiket_no } = responseData.items[0];
  const marka = responseData.items[0].uretici;
  const { model } = responseData.items[0];
  const { serino } = responseData.items[0];
  const { ad_soyad } = responseData.items[0];
  const { varlik_turu } = responseData.items[0];

  const [marka_arr, setMarkaArr] = useState([]);
  const [selectedValueModel, setSelectedValueModel] = useState(model);
  const [selectedValueMarka, setSelectedValueMarka] = useState(marka);
  const [model_arr, setModelArr] = useState([]);

  useEffect(() => {
    const url_marka = `--url here--${varlik_turu}`;
    const marka_arr_new = [];
    axios.get(url_marka)
      .then((res) => {
        for (let i = 0; i < res.data.items.length; i++) {
          marka_arr_new.push(res.data.items[i].d);
        }
        setMarkaArr(marka_arr_new);
      });
  }, []);

  useEffect(() => {
    const url_model = ` --url here-- ${varlik_turu}/${selectedValueMarka}`; // selectedValueMarka came from first picker
    const model_arr_new = [];
    axios.get(url_model)
      .then((res) => {
        for (let i = 0; i < res.data.items.length; i++) {
          model_arr_new.push(res.data.items[i].d);
        }
        setModelArr(model_arr_new);
      });
  }, [selectedValueMarka]);

  return (
    <View style={styles.container}>
      <View>
        <Text style={{ fontWeight: 'bold', padding: 8 }}>
          Etiket No        :
          {etiket_no}
        </Text>
        <Text style={{ fontWeight: 'bold', padding: 8 }}>Marka             :</Text>
        <Text style={{ fontWeight: 'bold', padding: 8 }}>Model             :</Text>
        <Text style={{ fontWeight: 'bold', padding: 8 }}>Seri No           :</Text>
        <Text style={{ fontWeight: 'bold', padding: 8 }}>Bölge              :</Text>
      </View>
      <View>
        <Picker
          selectedValue={selectedValueMarka}
          style={{ height: 50, width: 150 }}
          onValueChange={(newValue) => setSelectedValueMarka(newValue)}
        >

          { marka_arr.map((value, index) => <Picker.Item label={value} value={value} key={index} />) }

        </Picker>
        <Picker
          selectedValue={selectedValueModel}
          style={{ height: 50, width: 150 }}
          onValueChange={(itemValue, itemIndex) => setSelectedValueModel(itemValue)}
        >

          { model_arr.map((value, index) => <Picker.Item label={value} value={value} key={index} />) }

        </Picker>

      </View>
    </View>
  );
};
export default VeriGuncelleme;