Question

我想从

获取标题

https://facebook.github.io/react-native/movies.json 在手风琴中查看本机我该怎么做

这是我的代码，但是使用数组显示静态数据现在我想显示来自api的数据

const dataArray = [
  {
    title: "First Element",
    content:""

  },
  {
    title: "Second Element",
    content:
      "content1"
  },
  {
    title: "Third Element",
    content:
      "content2"
  }
];

class LocationScreen extends Component {



componentDidMount(){
    return fetch('https://facebook.github.io/react-native/movies.json ')
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          dataSource: responseJson.data,
        }, function(){

        });
          })
      .catch((error) =>{
        console.error(error);
      });
  }

  render() {
    return (
      <Container>
                 <Content padder>
          <Accordion
            dataArray={dataArray}

          />
        </Content>
      </Container>
    );
  }

Answer 1

通过{this.state.dataSource}替换{dataArray}

render() {
    return (
      <Container>
          <Content padder>
              <Accordion
                  dataArray={this.state.dataSource}
              />
          </Content>
       </Container>
    );
}

Answer 2

按照建议@slashsharp，使用this.state.dataSource。

在render方法中，您使用的是静态数据“ {dataArray}”。如果要开始显示这些静态值，请使用以下方法：

@foreach($products as product)

Answer 3

更改

this.setState({ dataSource:responseJson.movies }

并使用dataArray={this.state.dataSource}

Answer 4

renderContent(section, _, isActive) {
    return (
      <Animatable.View
        duration={400}
        style={[
          style.wrapServiceDesc,
          isActive ? style.seriveActiveDesc : style.seriveInactiveDesc
        ]}
        transition="backgroundColor"
      >
        <Animatable.Text
          animation={isActive ? "bounceIn" : undefined}
          style={[style.serviceDesc]}
        >
          {section.text} // fetch from API
        </Animatable.Text>
      </Animatable.View>
    );
  }

componentDidMount() {
    const url = "url";
    fetch(url)
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          dataSource: responseJson.data
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

render() {
    return (
      <Container>
          <Content padder>
          <Accordion                
                activeSections={activeSections}
                sections={this.state.dataSource}
                touchableComponent={TouchableOpacity}
                expandMultiple={multipleSelect}
                renderHeader={this.renderHeader}
                renderContent={this.renderContent}
                duration={400}
                onChange={this.setSections}
              />
        </Content>
      </Container>
    );
  }

renderContent(section, _, isActive) {
    return (
      <Animatable.View
        duration={400}
        style={[
          style.wrapServiceDesc,
          isActive ? style.seriveActiveDesc : style.seriveInactiveDesc
        ]}
        transition="backgroundColor"
      >
        <Animatable.Text
          animation={isActive ? "bounceIn" : undefined}
          style={[style.serviceDesc]}
        >
          {section.text} // fetch from API
        </Animatable.Text>
      </Animatable.View>
    );
  }

componentDidMount() {
    const url = "url";
    fetch(url)
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          dataSource: responseJson.data
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

render() {
    return (
      <Container>
          <Content padder>
          <Accordion                
                activeSections={activeSections}
                sections={this.state.dataSource}
                touchableComponent={TouchableOpacity}
                expandMultiple={multipleSelect}
                renderHeader={this.renderHeader}
                renderContent={this.renderContent}
                duration={400}
                onChange={this.setSections}
              />
        </Content>
      </Container>
    );
  }

从Accordion列表中的api获取数据反应本地

4 个答案: