Invariant Violation：对象作为 React 子对象无效（在 json 中使用 react-native 对象）

Question

使用 React-Native：

我将从我所拥有的开始..

json文件示例代码：

并且使用的任何“...”仅用于我的与问题无关的字符串值，看起来会分散注意力

[
{
"id": "question1"
"label": "..."
"option": [ { "order": 1, "name": "..."},
            { "order": 2, "name": "..."},
            { "order": 3, "name": "..."}
          ]
},
{
"id": "question2"
"label": "..."
"option": [ { "order": 1, "name": "..."},
            { "order": 2, "name": "..."},
            { "order": 3, "name": "..."}
          ]
},
{
"id": "question3"
"label": "..."
"option": [ { "order": 1, "name": "..."},
            { "order": 2, "name": "..."},
            { "order": 3, "name": "..."}
          ]
},

and so on....

在类下渲染代码

"data1" 就是我导入时调用的 json 文件，例如：import data1 from "../../...."

render(){
   return(
      <View
         <FlatList
         data={data1}
         showsVerticalScrollIndicator={false}
         renderItem={this.renderItem}
         keyExtractor={(item,index) => index.toString()}
         />
      </View>
   );
}

渲染项代码

renderItem = ({item}) => {
   return(
      <View
         <TouchableOpacity>
          <Text {item.id} </Text>
         </TouchableOpacity>
         <TouchableOpacity>
          <Text {item.label} </Text>
         </TouchableOpacity>
         <TouchableOpacity>
          <Text {item.option} </Text>  /* here is where I get the error because option is an object! */
         </TouchableOpacity>
          <Text {item.name} </Text>    /* this doesn't work either obviously */
         </TouchableOpacity>

我知道我无法访问选项，因为它是一个对象，但我希望能够访问其中的键（顺序和名称）

item.id 和 item.label 有效，因为它们不在对象“选项”中。我似乎不知道如何访问要在应用程序中使用的密钥。

作为参考，它是一个调查应用程序（因此是 TouchableOpacity），“标签”是用户的问题，对象“选项”及其“名称”是用户可以点击的各种答案。

我想我可能需要映射它，但我不太确定该怎么做。

Answer 1

item.option 是对象数组，而不是 JSX 数组。您可以将其字符串化（可能不是您想要的），或者您可以将数组映射到可渲染的 JSX。

<Text>
  {item.option.map(({ order, name }) => (
    <div>
      order: {order}, name: {name}
    </div>
  ))}
</Text>

这是在 react 中呈现数据对象列表或数组的惯用方式。 React-native 更进一步，提供了一个内置组件来处理渲染列表。 Flatlist 救援。

<FlatList
  data={item.option} // <-- pass the array object
  renderItem={({ item: { order, name } }) => ( // <-- your render item function
    <div>
      order: {order}, name: {name}
    </div>
  )}
/>

把它们放在一起，它看起来像这样：

renderOption = ({ item: { order, name } }) => (
  <div>
    order: {order}, name: {name}
  </div>
);

renderItem = ({item}) => {
   return(
      <View
         <TouchableOpacity>
          <Text {item.id} </Text>
         </TouchableOpacity>
         <TouchableOpacity>
          <Text {item.label} </Text>
         </TouchableOpacity>
         <TouchableOpacity>
         <FlatList
           data={item.option}
           renderItem={this.renderOption}
/>
         </TouchableOpacity>
          <Text {item.name} </Text>    /* this doesn't work either obviously */
         </TouchableOpacity>
       </View>
    );
}

render(){
   return(
      <View
         <FlatList
         data={data1}
         showsVerticalScrollIndicator={false}
         renderItem={this.renderItem}
         keyExtractor={(item,index) => index.toString()}
         />
      </View>
   );
}