选取器组件未显示所选值

Question

我正在尝试向我的React Native应用程序添加一个选择器。但是，选择后它不会更改为所选值。尽管在控制台中测试时总是显示所选的值，但选择器始终显示初始值。这是父组件：

  const LineSizingScreen = props => {
  const lineSizingCalculations = [
    { label: "Choose the value you want", value: "" },
    { label: "Value A", value: "value-a" },
    { label: "Value B", value: "value-b" }
  ];
  return (
    <View>
      <CalcPicker
        initialValue={lineSizingCalculations[0]}
        availableCalcs={lineSizingCalculations}
      ></CalcPicker>
    </View>
  );

这是Picker组件：

const CalcPicker = props => {
    const [pickerValue, setPickerValue] = useState(props.initialValue)
    const {availableCalcs} = props;

    return (
        <Picker
        selectedValue={pickerValue.label}
        style={{ height: 50, width: 350 }}
        onValueChange={(itemValue, itemIndex) => {
            const chosenCalc = availableCalcs.filter( calc => calc.value === itemValue );
            setPickerValue(chosenCalc[0])
        }}
      >
          {availableCalcs.map((item, index) => {
              return(
                <Picker.Item key={index} label={item.label} value={item.value} />
              )
          })}

      </Picker>
    )
}

因此，总会发生这样的情况，例如，当我选择值A时，所选值在应用程序上不会更改，但是当我控制台日志pickerValue.label时，得到的值A符合预期。

预先感谢