React Native下拉框同步选中问题求助：单个useState存储值异常

你遇到的问题核心是所有Dropdown组件共享了同一个状态变量，不管选哪一行的下拉框，都会修改全局的value和isFocus，导致所有下拉框显示相同内容。

要解决这个问题，需要给每一行的Dropdown维护独立的状态：

• 用对象存储每个行对应的选中值，键可以用行的唯一标识（这里用item本身，因为它是0-19的唯一数字）
• 用单个变量记录当前获取焦点的Dropdown，避免所有下拉框的焦点状态互相干扰

以下是修改后的完整代码：

import React, { useState } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
import { DataTable } from 'react-native-paper';
import { Dropdown } from 'react-native-element-dropdown';

const optionsPerPage = [2, 3, 4];
const data2 = [
  { label: 'Item 1', value: '1' },
  { label: 'Item 2', value: '2' },
  { label: 'Item 3', value: '3' },
  { label: 'Item 4', value: '4' },
  { label: 'Item 5', value: '5' },
  { label: 'Item 6', value: '6' },
  { label: 'Item 7', value: '7' },
  { label: 'Item 8', value: '8' },
];

const MyComponent = () => {
  const data = [...Array(20).keys()];
  // 用对象存储每行的选中值，key为行的item值
  const [selectedValues, setSelectedValues] = useState({});
  // 记录当前获取焦点的item，确保只有当前下拉框显示焦点样式
  const [focusedItem, setFocusedItem] = useState(null);
  const [page, setPage] = React.useState(0);
  const [itemsPerPage, setItemsPerPage] = React.useState(optionsPerPage[0]);

  React.useEffect(() => {
    setPage(0);
  }, [itemsPerPage]);

  const _renderItem = ({ item }) => (
    <DataTable.Row>
      <DataTable.Cell>{item}</DataTable.Cell>
      <DataTable.Cell numeric>159</DataTable.Cell>
      <DataTable.Cell>
        <Dropdown
          style={[styles.dropdown, focusedItem === item && { borderColor: 'blue' }]}
          placeholderStyle={styles.placeholderStyle}
          selectedTextStyle={styles.selectedTextStyle}
          inputSearchStyle={styles.inputSearchStyle}
          iconStyle={styles.iconStyle}
          data={data2}
          search
          maxHeight={300}
          labelField="label"
          valueField="value"
          placeholder={focusedItem !== item ? 'Select item' : '...'}
          searchPlaceholder="Search..."
          // 绑定当前item对应的选中值
          value={selectedValues[item] || null}
          onFocus={() => setFocusedItem(item)}
          onBlur={() => setFocusedItem(null)}
          onChange={(selectedItem) => {
            // 更新当前item的选中值
            setSelectedValues(prev => ({
              ...prev,
              [item]: selectedItem.value
            }));
            setFocusedItem(null);
          }}
        />
      </DataTable.Cell>
    </DataTable.Row>
  );

  return (
    <DataTable>
      <DataTable.Header>
        <DataTable.Title>Dessert</DataTable.Title>
        <DataTable.Title numeric>Calories</DataTable.Title>
        <DataTable.Title numeric>Fat</DataTable.Title>
      </DataTable.Header>
      <FlatList data={data} renderItem={_renderItem} />
    </DataTable>
  );
};

export default MyComponent;

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    padding: 16,
  },
  dropdown: {
    height: 50,
    width: 80,
    borderColor: 'gray',
    borderWidth: 0.5,
    borderRadius: 8,
    paddingHorizontal: 8,
    marginLeft: 20
  },
  icon: {
    marginRight: 5,
  },
  label: {
    position: 'absolute',
    backgroundColor: 'white',
    left: 22,
    top: 8,
    zIndex: 999,
    paddingHorizontal: 8,
    fontSize: 14,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 16,
  },
});

关键修改点说明：

• 把全局的value换成selectedValues对象，每个行的item作为key，存储对应选中的值
• 把全局的isFocus换成focusedItem变量，只记录当前获取焦点的行标识，确保焦点样式只作用于当前下拉框
• 在onChange中，通过展开运算符更新对象中对应item的选中值，不影响其他行的状态
• 每个Dropdown的value、onFocus、onBlur都绑定到当前item的状态，实现独立控制

内容的提问来源于stack exchange，提问作者kanu das