对象作为 React Child 无效（找到：带有键 id，name 的对象）

Posted 2023-02-16

【中文标题】对象作为 React Child 无效（找到：带有键 id，name 的对象）

【英文标题】：Objects are not valid as a React Child (found: object with keysid, name)对象作为 React Child 无效（找到：带有键 id，name 的对象）

【发布时间】：2020-01-13 09:08:29

【问题描述】：

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

我在项目中使用 react-native-radio-buttons SegmentedControls

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"
          />

...
)

RadioButtons.js

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>
    );
  

错误：

 Invariant Violation: Invariant Violation: Objects are not valid as a React child (found: object with keys id, name). If you meant to render a collection of children, use an array instead.

到目前为止，我在开发方面没有太多经验.. 请帮助解决这里的错误

感谢您的宝贵时间

【参考方案1】：

所以，我正在阅读来自 react-native-radio-buttons 的文档，然后才发现

您还可以通过 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
  />

我没有尝试过，但我认为它会起作用

【讨论】：

我试过这个，它消除了错误，但是，选定的值是未定义的

renderAddPackType(selectedOption, selectedIndex) this.setState( packTypeSelected: selectedOption.name ); console.log(selectedOption); 这解决了问题，但在按下几毫秒后选择会有所延迟

啊，好接棒！如果你只是直接使用回调方法而不是使用代理方法onSelectedItemsChange.

先生，您能不能扩展一下句子，

设置默认值是什么意思？您已经在RadioButtons 中使用selectedOption 指定了要选择的值。另外，如果我有帮助，请确保也给答案投票:)

【参考方案2】：

根据错误，SegmentedControls属性options接受一个ReactNode，而你分配一个数组Object。

将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>

请注意，我没有检查选项属性中SegmentedControls 接受的内容，它可能是ReactNodes 的数组或其他内容，只需重新检查它，因为您分配了错误的类型。

【讨论】：

先生，我没有使用 react js，对不起标签.. 而不是 div 组件我应该用什么？

我认为它只是 View in react-native

先生，稍后我将从服务器获取数据，我找不到合适的..任何其他可能制作干净的代码