0

我需要将一个反应原生选择器选择元素连接到另一个。我的意思是我有两个模型名称品牌和模型。当我选择品牌时，模型选择器应填写属于该品牌的模型。我尝试了类似下面的方法，但我得到“未定义不是函数（靠近'...models.map...'）”错误。我应该如何像这样连接两个选择器？或者我的错误在哪里？

class Brand(models.Model):
    brand_name = models.CharField(max_length=20, blank = True, default = '')

class Model(models.Model):
    brand = models.ForeignKey(Brand, on_delete=models.CASCADE)
    model_name = models.CharField(max_length = 20, blank = True, default = '')


class BrandViewSet(viewsets.ModelViewSet):
    serializer_class = BrandSerializer
    queryset = Brand.objects.all()
    permission_classes = (AllowAny,)

    @action(detail=True, methods=['GET'])
    def getbrandmodels(self, request, pk=None):
        brand = Brand.objects.get(id=pk)
        models = Model.objects.filter(brand=brand)
        serializer = ModelSerializer(data=models)
        serializer.is_valid()
        return Response(serializer.data)

  const [brands, setBrands] = useState([]);
  const [models, setModels] = useState([]);
  const [brand, setBrand] = useState(1);
  const [model, setModel] = useState(1);

  useEffect(() => {
    getBrands();
    getmodels();
  }, []);
  
  const getBrands = () => {
    fetch('http://127.0.0.1:8000/api/brands/', {
      method: 'GET',
      headers: {
      }
      })
      .then( res => res.json())
      .then( jsonRes => setBrands(jsonRes))
      .catch( error => console.log(error));   
  }

  
  const getmodels = (value) => {
    setBrand(value);

    fetch(`http://127.0.0.1:8000/api/brands/${brand}/getbrandmodels`, {
      method: 'GET',
      headers: {
      }
      })
      .then( res => res.json())
      .then( jsonRes => setModels(jsonRes))
      .catch( error => console.log(error));   
  }



  return (
    <View style={styles.container}>
    
      <RNPickerSelect style={StyleSheet.flatten(styles.picker)} itemStyle={styles.pickerItem}
          useNativeAndroidPickerStyle={false}
          selectedValue={brand}  
          onValueChange={value=>getmodels(value)} 
          doneText = 'Tamam'
          items={brands.map(obj => (
            {
               key: obj.id,
               label: obj.brand_name,
               value: obj.id,
               color: "rgba(77,38,22,1)",
            }))}
          >
        </RNPickerSelect>
        
        <RNPickerSelect style={StyleSheet.flatten(styles.picker)} itemStyle={styles.pickerItem}
          useNativeAndroidPickerStyle={false}
          selectedValue={model}  
          onValueChange={value=>setModel(value)} 
          doneText = 'Tamam'
          items={models.map(obj => (
            {
               key: obj.id,
               label: obj.model_name,
               value: obj.id,
               color: "rgba(77,38,22,1)",
            }))}
          > 
        </RNPickerSelect>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'orange',
    padding: 5
  },
  label: {
    fontSize: 15,
    color: 'white',
    padding: 10
  },
  input: {
    fontSize: 20,
    backgroundColor: '#fff',
    padding: 5,
    margin: 5
  },
  picker: {
    // flex: 1,
      width: "100%",
      height: 44,
    },
    pickerItem: {
      height: 44
    }
});
4

1 回答 1

0

我不知道为什么，但在这里问后我又解决了:)

我只在视图集中更改了我的 getbrandmodels 方法，如下所示。

@action(detail=True, methods=['GET'])
    def getbrandmodels(self, request, pk=None):
        brand = Brand.objects.get(id=pk)
        models = Model.objects.filter(brand=brand)
        serializer = ModelSerializer(instance=models, many=True)
       
        return Response(serializer.data)
于 2020-07-11T22:55:25.897 回答