Javascript 如何在react native中获取json数据中的数组值？

您好，我正在尝试呈现一个从服务器获取响应，如下所示

.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

.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>
    ...
  ))}

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

.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>
    ...
  ))}

到目前为止，我尝试的对应代码如下所示

代码

 <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.map（细节=>
{detail.title}
{detail.content}
)}

此.state.k中的json数据如下。我正在尝试将标题呈现为
headingText
，将内容呈现为
videoContent
。请帮助我找到解决方案。
看起来您缺少的是在
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>

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

.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>
    ...
  ))}

{detail.content.map（（curr）=>(
...
标题：{curr.Title}
Id:{curr.Id}
...
))}
不确定您的代码。方法映射返回新数组，所以您并没有在每个映射迭代中设置状态，而是转换元素并返回新数组。因此，MAP函数的结果将是具有映射元素的新数组。比如：const originalArray=[0,1,2,3,4]const newArray=originalArray.map（（element）=>{return element+1}）和newArray将是[1,2,3,4,5]。我希望
内容作为一个新数组，应该映射到
内容上。我该怎么做？很好，很高兴我能帮忙：）