React Native中如何为API返回数据的label注入前缀字符串？

• 可以注入Post to 字符串，必须基于响应数据新建数组——因为你无权修改API返回的原始数据，只能在前端对数据做转换后再用于展示。

你之前尝试在value或onValueChange里修改是没用的，因为Picker组件是通过items数组里每个对象的label字段来渲染选项文本的，和选中值的处理逻辑无关。

修改代码步骤： #

在获取到API响应后，用map方法遍历数组，为每个对象生成新的label值：

const [pickerData, setPickerData] = React.useState<{ label: string; value: string }[]>([]);
const fetchPickerData = React.useCallback(async () => {
  const response = await getPostLocations();
  if (!response) return;

  // 转换数据，修改每个item的label
  const transformedData = response.map(item => ({
    ...item,
    label: `Post to ${item.label}`
  }));
  
  setPickerData(transformedData);
}, []);

React.useEffect(() => {
  fetchPickerData().catch(console.error);
}, [fetchPickerData]);

之后Picker组件的使用不需要改动，因为pickerData已经是转换好的数组，组件会自动用新的label值渲染选项：

<Picker
    items={pickerData}
    value={pickerItem}
    onValueChange={(pickerItem) => setPickerItem(pickerItem)}
/>

这样每个Picker选项就会显示Post to Group 1、Post to Group 2这类文本，同时value字段保持API返回的原始值不变，不影响选中逻辑。

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