Question

我正在使用native base用户界面套件（I'm following this doc）的手风琴。但是问题是我无法在手风琴中提供自定义内容。我要提供的内容是服务器的获取响应。 json响应（responseData）的格式如下

json

[
  {
    data: {
      description: "",
      curriculum: [
        {
          key: 0,
          id: 0,
          type: "section",
          title: "A1. This is first Section title",
          duration: 0,
          meta: []
        },
        {
          key: 1,
          id: "2821",
          type: "unit",
          title: "1. Unit1",
          duration: 0,
          meta: []
        },
        {
          key: 2,
          id: "2864",
          type: "unit",
          title: "2. Unit2",
          duration: 0,
          meta: []
        },
        {
          key: 17,
          id: 0,
          type: "section",
          title: "A2. This is the second section title",
          duration: 0,
          meta: []
        },
        {
          key: 18,
          id: "2903",
          type: "unit",
          title: "1. Unit1",
          duration: 0,
          meta: []
        },
        {
          key: 19,
          id: "2905",
          type: "unit",
          title: "2. Unit2",
          duration: 0,
          meta: []
        }
      ]
    }
  }
];

反应本机部分如下

componentWillMount(){
    fetch(url)
      .then(response => response.json())
      .then(responseData => {
        this.setState({
          details: responseData
        });
      });
  }

_renderHeader(item, expanded) {
    return (
      <View>
        <Text style={{ fontWeight: "600" }}> {item.title}</Text>
        {expanded ? (
          <Icon style={{ fontSize: 18 }} name="remove-circle" />
        ) : (
          <Icon style={{ fontSize: 18 }} name="add-circle" />
        )}
      </View>
    );
  }
_renderContent(item) {
    return (
      <View>
        {item.type === "unit" ? (
          <Text>
            {item.content}
          </Text>
        ) : (
          <View />
        )}
      </View>
    );
  }
 ...
<Accordion
            dataArray={this.state.details}
            animation={true}
            expanded={true}
            renderHeader={this._renderHeader}
            renderContent={this._renderContent}
          />

Answer 1

在示例中，您所遵循的数据结构与您正在使用的数据结构不完全匹配。这是他们正在使用的东西：

 const dataArray = [
  { title: "First Element", content: "Lorem ipsum dolor sit amet" },
  { title: "Second Element", content: "Lorem ipsum dolor sit amet" },
  { title: "Third Element", content: "Lorem ipsum dolor sit amet" }
];

他们正在使用对象数组，当查看示例数据时，这些对象可能就是您的课程属性中的内容。但似乎您将整个json响应设置为this.state.details。

您需要将您的responseData转换为与示例中的数据结构更紧密匹配的内容。也许使用.map函数，使最终的结果更有用。这是一个SO问题，显示了如何使用map函数。 ES6 map an array of objects, to return an array of objects with new keys

在您的_renderContent中，您呼叫item.content，但是在查看您提供的数据时，没有任何一项具有content属性。因此，致电item.content将使您得到undefined的答复。

如何在react native中显示手风琴中的服务器响应内容？

1 个答案: