React native 反应本机选择器，获取selectedValue

我有一个

选择器

组件，如下所示：

const reasons = [
  { name: 'A' },
  { name: 'B' },
  { name: 'Other' }
];

<Picker
  selectedValue={state.reasonSelected}
  onValueChange={value => {
    changeTransactionReason(value);
  }}
>
  {reasons.map((reason, key) => (
    <Picker.Item
      key={key}
      label={reason.name}
      value={reason.name}
    />
  ))}
</Picker>

但我不想把本地州和redux混为一谈。这些值将存储在redux上，但

---

如何比较“其他”值而不丢失其实际值？因此，我想知道是否有一种方法可以使用

选取器

在不设置局部状态的情况下获取所选值

为什么不直接与redux进行比较？如果使用react redux，则可以使用mapStateToProps（）映射存储所选项目的值，如果直接使用redux，则仍然可以这样做。然后，一旦选择“其他”的操作已调度且值已设置，您的输入将显示。

如果您不想使用redux，则需要从props获取其他值并在选择器上初始化该值。 当做 只有使用redux，我才会这样做：

我会创建一个减速机

const intialState = {
  reasonSelected: '1',
  reasons: [{name: '1'}, {name: '2'}, {name: '3'}],
};

const reasons = (state = intialState, {type, payload}) => {
  switch (type) {
    case 'CHANGE_SELECTED':
      return payload;
    default:
      return state;
  }
};

export default reasons;

在这个reducer中，我将初始化值和selecteddefault，并创建一个动作更改selected来更改所选的值

在我称之为减速器的组件中，我称之为仪表板

import React from 'react';
import {View, Text, Picker} from 'react-native';

import {useSelector, useDispatch} from 'react-redux';

const Dashboard = () => {
  const reasonObj = useSelector((state) => state.reasons);

  const dispatch = useDispatch();

  const onValuePickChange = (value) => {
    dispatch({
      type: 'CHANGE_SELECTED',
      payload: {
        reasonSelected: value,
        reasons: reasonObj.reasons,
      },
    });
  };
  return (
    <View>
      <Text>Dashboard</Text>
      <Picker
        selectedValue={reasonObj.reasonSelected}
        onValueChange={(value) => onValuePickChange(value)}>
        {reasonObj.reasons.length > 0 &&
          reasonObj.reasons.map((reason, key) => (
            <Picker.Item key={key} label={reason.name} value={reason.name} />
          ))}
      </Picker>
    </View>
  );
};

export default Dashboard;

从“React”导入React；
从“react native”导入{View，Text，Picker}；
从“react-redux”导入{useSelector，useDispatch}；
常量仪表板=（）=>{
const reasonObj=useSelector（（state）=>state.reasons）；
const dispatch=usedpatch（）；
const onValuePickChange=（值）=>{
派遣({
键入：“更改所选内容”，
有效载荷：{
所选原因：值，
理由：理由，
},
});
};
返回(
仪表板
onValuePickChange（值）}>
{reasonObj.reasons.length>0&&
reasonObj.reasons.map（（原因，键）=>(
))}
);
};
导出默认仪表板；

在这个表单中，您没有使用本地状态，所有内容都会立即更新到redux

我希望这些信息能帮助你。。。

---

关于

我想使用redux，但我不想同时使用redux和localstate。只有Redux你在使用钩子吗？是的，但我不想使用useState，我不想使用local state。我想我找到了一个只有redux的解决方案，我正在为value和labelOk存储数据，所以我想这样做。

import React from 'react';
import {View, Text, Picker} from 'react-native';

import {useSelector, useDispatch} from 'react-redux';

const Dashboard = () => {
  const reasonObj = useSelector((state) => state.reasons);

  const dispatch = useDispatch();

  const onValuePickChange = (value) => {
    dispatch({
      type: 'CHANGE_SELECTED',
      payload: {
        reasonSelected: value,
        reasons: reasonObj.reasons,
      },
    });
  };
  return (
    <View>
      <Text>Dashboard</Text>
      <Picker
        selectedValue={reasonObj.reasonSelected}
        onValueChange={(value) => onValuePickChange(value)}>
        {reasonObj.reasons.length > 0 &&
          reasonObj.reasons.map((reason, key) => (
            <Picker.Item key={key} label={reason.name} value={reason.name} />
          ))}
      </Picker>
    </View>
  );
};

export default Dashboard;