React Native：我如何获取 Picker 的值并将其添加到 Flatlist答案

【问题标题】：React Native: how can i Get value of Picker and add it to FlatlistReact Native：我如何获取 Picker 的值并将其添加到 Flatlist
【发布时间】：2021-01-14 06:57:57
【问题描述】：

我正在使用 React-Native ，并且想要获取 Picker 的 selected item 的值并将其添加到 FlatList 这是我的选择器

  const [selectedValue, setSelectedValue] = useState('');
  <Picker
          selectedValue={selectedValue}
          style={{ height: 50, width: 150 }}
          onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
        >
          <Picker.Item label="Food" value="java" />
          <Picker.Item label="Transport" value="transport" />
          <Picker.Item label="Rent" value="js" />
          <Picker.Item label="Other" value="other" />
        </Picker>

这是我的平面列表和按钮 OnPress，应该将此值添加到 Flatlist

<Button
          title="Add me"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
 <FlatList
          data={data}
          renderItem={({ item }) => (<Text style = {styles.item}> {item.name}</Text>)}
          keyExtractor={(item, index) => index.toString()}  
           />

item.name 是我从 Text INPUT 获得的值，我也想添加 Picker 值，但无法用 Picker 解决

【问题讨论】：

标签： javascript reactjs react-native react-redux

【解决方案1】：

import React, { Component, useState } from 'react';
import {
  Text,
  Alert,
  TouchableOpacity,
  Button,
  TextInput,
  View,
  StyleSheet,
  FlatList
} from 'react-native';
import { hScale, vScale, fScale } from 'react-native-scales';
import { Picker } from '@react-native-picker/picker';

const App = () => {
  const [selectedValue, setSelectedValue] = useState('');
  const [selectedValueData, setSelectedValueData] = useState([]);

  return (
    <View >
      <FlatList
          extraData={selectedValueData}
          data={selectedValueData}
          renderItem={({ item }) => {return <Text>{item.name}</Text>}}
          keyExtractor={(item, index) => index.toString()}  
           />
        <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: 150 }}
        onValueChange={(itemValue, itemIndex) => {
          setSelectedValue(itemValue);
          if (!selectedValueData.some((i) => i.name === itemValue)) {
            setSelectedValueData([...selectedValueData, { name: itemValue }]);
          }
        }}>
        <Picker.Item label="Food" value="java" />
        <Picker.Item label="Transport" value="transport" />
        <Picker.Item label="Rent" value="js" />
        <Picker.Item label="Other" value="other" />
      </Picker>
    </View>
  );
};

export default App;

【讨论】：

我应该把 Button 放在那里还是没问题，因为它什么也没给？

【解决方案2】：

这可能会有所帮助

const [data, setData] = useState([...]);

// add selected item to list
const addItemToList = () => {
  const newData = [...data];
  newData.push(selectedValue);
  setData(newData);
};

<Button
  title="Add me"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
  onPress={addItemToList} // add onPress
/>

【讨论】：

【解决方案3】：

试试这个

import React, { Component, useState } from 'react';
    import {
      Text,
      Alert,
      TouchableOpacity,
      Button,
      TextInput,
      View,
      StyleSheet,
      FlatList
    } from 'react-native';
    import { hScale, vScale, fScale } from 'react-native-scales';
    import { Picker } from '@react-native-picker/picker';
    
    const App = () => {
      const [selectedValue, setSelectedValue] = useState('');
      const [selectedValueData, setSelectedValueData] = useState([]);
      const addToList = () =>{
         if (!selectedValueData.some((i) => i.name === selectedValue)) {
                setSelectedValueData([...selectedValueData, { name: selectedValue }]);
              }
      }
      return (
        <View >
          <FlatList
              extraData={selectedValueData}
              data={selectedValueData}
              renderItem={({ item }) => {return <Text>{item.name}</Text>}}
              keyExtractor={(item, index) => index.toString()}  
               />
            <Picker
            selectedValue={selectedValue}
            style={{ height: 50, width: 150 }}
            onValueChange={(itemValue, itemIndex) => {
              setSelectedValue(itemValue);
            }}>
            <Picker.Item label="Food" value="java" />
            <Picker.Item label="Transport" value="transport" />
            <Picker.Item label="Rent" value="js" />
            <Picker.Item label="Other" value="other" />
          </Picker>
          <TouchableOpacity onPress={addToList}>
             <Text>Add</Text>
          </TouchableOpacity>
        </View>
      );
    };
    
    export default App;

【讨论】：