Question

您好，我正在尝试从服务器中获取如下所示的获取响应

.then(responseData => {
                responseData.map(detail => {

                    let currIndex = -1;
                    let k = detail.data.curriculum.reduce((acc, curr) => {

                        if (curr.type === 'section') {
                            acc.push({
                                title: curr.title,
                                content: [],
                                id: []
                            })
                            currIndex += 1
                        } else {
                            acc[currIndex].content.push(curr.title);
                            acc[currIndex].id.push(curr.id);
                        }

                        return acc;
                    }, []);
                    console.log(k)
                    this.setState({ k })
                });
            });

我正在尝试呈现这样的UI

但是我得到的是视频内容的名称将像这样的列表一个接一个地列出

到目前为止，我尝试过的相应代码如下

代码

 <Content padder style={{ backgroundColor: "#f4f4f4" }}>

                        {this.state.k.map(detail =>

                            <View style={st.card}>
                                <View style={st.cardHeading}>
                                    <Text style={st.headingText}>{detail.title}</Text>
                                </View>

                                <ScrollView
                                    horizontal
                                    style={st.cardBody}>

                                    <View style={st.videoContent}>
                                        <View style={st.videoImage}>
                                            <MaterialCommunityIcons name="play-circle-outline" size={25} color="#fff" />
                                        </View>
                                        <Text style={st.subheadingText}>{detail.content}</Text>
                                    </View>

                                </ScrollView>

                            </View>
                        )}
</Content

>

this.state.k中的json数据如下。我正在尝试将Title渲染为headingText，将内容渲染为videoContent。请帮助我找到解决方案。

Answer 1

您似乎缺少的是实际上遍历ScrollView元素内的内容或id数组。根据您当前的数据结构，我建议做这样的事情。

<ScrollView
  horizontal
  style={st.cardBody}
>
  {detail.content.map((contentValue, i) => (
    <View style={st.videoContent}>
      <View style={st.videoImage}>
        <MaterialCommunityIcons
          name="play-circle-outline"
          size={25}
          color="#fff"
        />
      </View>

      <Text style={st.subheadingText}>
        Title: { contentValue }
        Id: { detail.id[i] }
      </Text>
    </View>
  ))}
</ScrollView>

请注意，我在id元素内添加了Text数组中的值，不仅说明了如何访问它，而且还表明数据结构使此操作变得很麻烦，因此可能更好地改善这种结构，就像这样

.then(responseData => {
  responseData.map(detail => {
    let currIndex = -1;
    const k = detail.data.curriculum.reduce((acc, curr) => {

      if (curr.type === 'section') {
        acc.push({
            title: curr.title,
            content: []
        })
        currIndex += 1

      } else {
        acc[currIndex].content.push(curr);
      }

      return acc;
    }, []);

    this.setState({ k })
  });
});

这样，您在映射时不必跟踪数组的索引，并且可以像这样简单地使用它

  {detail.content.map((curr) => (
    ...
      <Text style={st.subheadingText}>
        Title: { curr.title }
        Id: { curr.id }
      </Text>
    ...
  ))}

如何在React Native中获取json数据中的数组值？

1 个答案: