Javascript 对象作为React子对象无效（找到：键为{id，name}的对象）

我试图通过组件的回调将单选按钮实现到我的react原生项目中

Im使用反应本机单选按钮分段控件进入项目

App.js

import files....
import RadioButtons from "../components/RadioButtons";

//Data
const PackingType = [{id:"1", name: "Bag"},{id: "2",name: "Box"}];

export default class App extends Component {
constructor(props) {
    super(props);
    this.state = {
      packTypeSelected: [],
    };
  }
...

  renderAddPackType(selectedOption, selectedIndex) {
    this.setState({ selectedIndex });
    console.log(selectedIndex[0]);
  }

...
render(){
return(
...

 <RadioButtons
            buttonOptions={PackingType}
            callback={this.renderAddPackType.bind(this)}
            selectedOption={"Bag"}
          />

...
)
}

import { SegmentedControls } from "react-native-radio-buttons";
export default class RadioButtons extends Component {
  onSelectedItemsChange = (selectedOption, selectedIndex) => {
    this.props.callback(selectedOption, selectedIndex);
  };

  render() {
    return (
      <View style={{ marginHorizontal: 20, marginVertical: 10 }}>
        <SegmentedControls
          options={this.props.buttonOptions}
          onSelection={(selectedOption, selectedIndex) =>
            this.onSelectedItemsChange(selectedOption, selectedIndex)
          }
          selectedOption={this.props.selectedOption}
        />
      </View>
    );
  }
}

到目前为止，我在发展方面经验不多。。 请帮忙纠正这里的错误

---

感谢您抽出时间

根据错误，

分段控件

属性选项接受一个

反应节点

，并分配一个数组

对象

将

PackingType

类型更改为

ReactElement

，例如：

// Array Object - throws an error
const PackingType = [{id:"1", name: "Bag"},{id: "2",name: "Box"}];

// ReactNode example
const PackingType = (
  <div>
    {[{ id: "1", name: "Bag" }, { id: "2", name: "Box" }].map(type => (
      <div key={type.id}>{type.name}</div>
    ))}
  </div>
);

// Assigning as props
<RadioButtons
  buttonOptions={PackingType}
  callback={this.renderAddPackType.bind(this)}
  selectedOption={"Bag"}
/>

// Using them inside SegmentedControls
<View>
  <SegmentedControls
    options={this.props.buttonOptions}
  />
</View>

//数组对象-引发错误
const PackingType=[{id:“1”，name:“Bag”}，{id:“2”，name:“Box”}]；
//反应节点示例
常数包装类型=(
{[{id:“1”，名称：“Bag”}，{id:“2”，名称：“Box”}].map（类型=>(
{type.name}
))}
);
//指定为道具
//在分段控件中使用它们

---

请注意，我没有检查选项属性中接受的

SegmentedControls

内容，它可能是

ReactNode

s数组或其他内容，只是重新检查它，因为您分配了错误的类型。

因此，我正在阅读

react native单选按钮的文档，刚刚发现

还可以通过extractText属性指定如何从选项中提取标签

这显然是你的代码中缺少的。这是他们希望你做的

  <SegmentedControls
    options={this.props.buttonOptions}
    onSelection={(selectedOption, selectedIndex) =>
      this.onSelectedItemsChange(selectedOption, selectedIndex)
    }
    selectedOption={this.props.selectedOption}
    extractText={ (option) => option.name }
    testOptionEqual={(selectedValue, option) => selectedValue === option.name}
  />


此.onSelectedItemsChange（selectedOption，selectedIndex）
}
selectedOption={this.props.selectedOption}
extractText={（option）=>option.name}
testOptionEqual={（selectedValue，option）=>selectedValue===option.name}
/>

我还没有试过，但我想它会起作用的
先生，我没有使用react js，很抱歉标签。。我应该使用什么来代替div组件？我想它只是react nativesir中的
视图
，稍后我将从服务器获取数据，我找不到合适的数据。。创建干净代码的任何其他可能性我已经尝试过了，它会删除错误，但是，所选值是未定义的
renderadpacktype（selectedOption，selectedIndex）{this.setState（{packTypeSelected:selectedOption.name}）；console.log（selectedOption）；}
这解决了问题，但在按下几毫秒后，选择变得有些延迟，很好！如果您直接使用callback方法，而不是在selecteditemschange上使用代理方法，该怎么办？先生，请您扩展一下句子，设置默认值是什么意思？您已经在
单选按钮中指定了要使用
selectedOption
选择的值。另外，如果我有帮助的话，请确保投票支持我的答案：）
  <SegmentedControls
    options={this.props.buttonOptions}
    onSelection={(selectedOption, selectedIndex) =>
      this.onSelectedItemsChange(selectedOption, selectedIndex)
    }
    selectedOption={this.props.selectedOption}
    extractText={ (option) => option.name }
    testOptionEqual={(selectedValue, option) => selectedValue === option.name}
  />