反应本机选择器

时间:2020-04-19 02:01:02

标签: javascript reactjs react-native picker

我对React Native还是陌生的,我正在尝试在我的应用中使用Picker。问题是,当我在Picker onValueChange上更改我的值时,它会正确设置我的状态,但是即使在我更改为Picker onValueChange时,例如在更改为Murder时,selectedValue标签也会显示“ Assault”(犯罪类型数组的项目): / p>

  const [criminals, setCriminals] = useState([]);
  const [crimeTypes, setCrimeTypes] = useState([]);
  const [criminalFields, setCriminalFields] = useState([
    {
      crimeType: {},
      criminal: {},
    },
  ]);

function createCriminalFields() {
    return criminalFields.map((item, index) => (
      <>
        <FieldTitle>
          Type of crime {criminalFields[index].crimeType.tx_type}
        </FieldTitle>

        <PickerInput>
          <Picker
            selectedValue={criminalFields[index].crimeType.tx_type}
            onValueChange={(value) =>
              handleCriminalChange(value, index, 'crimeType')
            }>
            {crimeTypes.map((types) => {
              return <Picker.Item label={types.tx_type} value={types} />;
            })}
          </Picker>
        </PickerInput>

        <FieldTitle>Criminal</FieldTitle>
        <PickerInput>
          <Picker
            selectedValue={criminalFields[index].criminal.tx_name}
            onValueChange={(value) =>
              handleCriminalChange(value, index, 'criminal')
            }>
            {criminals.map((criminal) => {
              return <Picker.Item label={criminal.tx_name} value={criminal} />;
            })}
          </Picker>
        </PickerInput>
      </>
    ));
  }

function handleCriminalChange(itemValue, itemIndex, itemField) {
    let fields = [...criminalFields];
    fields[itemIndex] = {
      ...fields[itemIndex],
      [itemField]: itemValue,
    };
    setCriminalFields(fields);
    props.dataChanged(fields);
  }

上面的代码基本上是这样的:

在onValueChange事件上,它使用用户在Picker(即对象)上选择的值来设置我的CrimeFields状态。在我的selectedValue中,我通过传递项目的索引来获取该值,并获取要显示的对象项目,但是它停留在“突击”中。

我将此值打印在文本上,并且正确显示,仅在我的selectedValue错误的情况下。

有什么想法吗?

PS:项目.tx_type退出了,我可以从我的API中获取

0 个答案:

没有答案