使用 Onclick，在 react native 中获取 api 数据答案

【问题标题】：using Onclick, fetch api data in react native使用 Onclick，在 react native 中获取 api 数据
【发布时间】：2021-11-14 03:02:21
【问题描述】：

我是 React Native 的新手。我正面临这种观点的问题。基本上它是这样的，当您单击一个按钮时，它会生成任何随机数，现在这个随机数变成一个 id，它位于 API url 的末尾，并使用这个新的 API - 在它的末尾带有 ID。 - 获取数据。现在我将这个任务分为两部分，生成随机数代码（即 sn-p 1）和从 api 获取数据（即 sn-p 2）。到目前为止，我不知道如何将它们结合起来，因为我是新来的反应原生的，所以任何人都会在这里提供一点帮助。

片段 1

import { StyleSheet, View, Button, Text } from 'react-native';
export default class MyProject extends Component {
  constructor(){
    super();
    this.state={
      // This is our Default number value
      NumberHolder : 0
    }
  }
GenerateRandomNumber=()=>
{
var RandomNumber = Math.floor(Math.random() * 5000) + 1 ;
this.setState({
  NumberHolder : RandomNumber
})
}
  render() {
    return (  
      <View style={styles.MainContainer} >
       <Text style={{marginBottom: 10, fontSize: 20}}>{this.state.NumberHolder}</Text>
       <Button title="Generate Random Number" onPress={this.GenerateRandomNumber} />      
      </View>
    );
  }
}
const styles = StyleSheet.create(
{
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

片段 2

import React, { useState } from "react";
import { Box, FlatList, Center, NativeBaseProvider, Button } from "native-base";
import { StyleSheet, View, ActivityIndicator, Text, TouchableOpacity, Image } from 'react-native';

export default function MyFUnction() {
  
  const [data, setData] = useState(null);
  const [visible, setVisible] = useState(true);

  const fetchData = async () => {
    const resp = await fetch("https://jsonplaceholder.typicode.com/photos/7");
    const data = await resp.json();
    setData(data);
    setVisible(false);
  };

  const renderItem = ({ item }) => {
    return (
      <TouchableOpacity style={styles.list}>
        <Text>{item.title}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <NativeBaseProvider>
      <Center flex={1}>
        {visible && <Button onPress={() => fetchData()}>Press</Button>}
        {data && (
          <FlatList
            data={data}
            renderItem={(item) => this.renderItem(item)}
            keyExtractor={(item) => item.id.toString()}
          />
        )}
      </Center>
    </NativeBaseProvider>
  );
}

const styles = StyleSheet.create({
  list: {
    paddingVertical: 4,
    margin: 5,
    backgroundColor: '#fff',
  },
});

提前致谢！！

【问题讨论】：

您制作了 2 个组件，但不要在另一个中调用它们中的任何一个！正如你之前所说，你必须为此制作一个组件！或者当你做 2 时，你必须在另一个中调用其中一个！这有帮助还是我在答案框中写代码？
tbh，我无法清楚地理解这个问题。您需要将该随机数传递给 sn-p 2 吗？还是别的什么？
@Mohamadamin，在代码中会很棒。因为你刚才说的超出了我的水平。
@Edofx 我想一起使用这个 sn-p，这意味着当按下按钮时会生成一个随机数并将其传递给 API。我知道如何将它传递给 API。但问题是片段 1 是一个类，而 2 是一个函数。

标签： javascript react-native random fetch

【解决方案1】：

我认为你必须清楚地了解组件！ React 是基于组件的！ 但你的情况不是 2 个组件！您有一个用于获取 api 并显示在列表中的组件！生成随机数不是组件，而是列表组件中的方法（或函数）！我认为最好使用一个组件作为列表并为其包装一个函数以生成随机数。

import React, { useState } from "react";
import { Box, FlatList, Center, NativeBaseProvider, Button } from "native-base";
import { StyleSheet, View, ActivityIndicator, Text, TouchableOpacity, Image } from 'react-native';

export default function MyFUnction() {
  
  const [data, setData] = useState(null);
  const [visible, setVisible] = useState(true);

  const generatRandomNumber = () => {
    return Math.floor(Math.random() * 5000) + 1
  }
  
  const fetchData = async () => {
    const resp = await fetch(`https://jsonplaceholder.typicode.com/photos/${generatRandomNumber()}`);
    const data = await resp.json();
    setData(data);
    setVisible(false);
  };

  const renderItem = ({ item }) => {
    return (
      <TouchableOpacity style={styles.list}>
        <Text>{item.title}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <NativeBaseProvider>
      <Center flex={1}>
        {visible && <Button onPress={() => fetchData()}>Press</Button>}
        {data && (
          <FlatList
            data={data}
            renderItem={(item) => this.renderItem(item)}
            keyExtractor={(item) => item.id.toString()}
          />
        )}
      </Center>
    </NativeBaseProvider>
  );
}

const styles = StyleSheet.create({
  list: {
    paddingVertical: 4,
    margin: 5,
    backgroundColor: '#fff',
  },
});

但是如果你想在你有的组件之间传递数据，它与函数或类组件无关，你可以通过道具在它们之间传递数据！所以你的代码是这样的：

随机数组件

import { StyleSheet, View, Button, Text } from 'react-native';
export default class MyProject extends Component {
  constructor(props){ //edited
    super(props); //edited
    this.state={
      // This is our Default number value
      NumberHolder : 0
    }
  }
GenerateRandomNumber=()=>
{
var RandomNumber = Math.floor(Math.random() * 5000) + 1 ;
this.props.randomNumber(RandomNumber)
}
  render() {
    return (  
      <View style={styles.MainContainer} >
       <Text style={{marginBottom: 10, fontSize: 20}}>{this.state.NumberHolder}</Text>
       <Button title="Generate Random Number" onPress={this.GenerateRandomNumber} />      
      </View>
    );
  }
}
const styles = StyleSheet.create(
{
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

您的列表组件：

import React, { useState } from "react";
import { Box, FlatList, Center, NativeBaseProvider, Button } from "native-base";
import { StyleSheet, View, ActivityIndicator, Text, TouchableOpacity, Image } from 'react-native';
// import MyProject
export default function MyFUnction() {
  
  const [data, setData] = useState(null);
  const [visible, setVisible] = useState(true);
  const [number, setNumber] = useState(null);    

  const fetchData = async () => {
    const resp = await fetch(`https://jsonplaceholder.typicode.com/photos/${number}`);
    const data = await resp.json();
    setData(data);
    setVisible(false);
  };

  const renderItem = ({ item }) => {
    return (
      <TouchableOpacity style={styles.list}>
        <Text>{item.title}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <NativeBaseProvider>
      <Center flex={1}>
      <MyProject radomNumber={(number) => setNumber(number)}
        {visible && <Button onPress={() => fetchData()}>Press</Button>}
        {data && (
          <FlatList
            data={data}
            renderItem={(item) => this.renderItem(item)}
            keyExtractor={(item) => item.id.toString()}
          />
        )}
      </Center>
    </NativeBaseProvider>
  );
}

const styles = StyleSheet.create({
  list: {
    paddingVertical: 4,
    margin: 5,
    backgroundColor: '#fff',
  },
});

【讨论】：

感谢您的回复。正如你所说，我应用了这个，我收到了这个错误。我在您的“您的列表组件”代码 sn-p 中导入了 MyProject 类，它保存在 app.js 中。你能告诉我我在这里缺少什么吗？ _this.props.randomNumber 不是函数。（在'_this.props.randomNumber(RandomNumber)'中，'_this.props.randomNumber'未定义）
答案已编辑！！

【解决方案2】：

感谢大家帮助我。如果将来有人需要答案，我在这里发布我的问题的答案。

import React, { useEffect, useState, Component } from 'react';

import { StyleSheet, View, Button, FlatList, Text, Image } from 'react-native';
 
export default class MyProject extends Component {
  constructor(){
    super();
    this.state={

      // This is our Default number value
      NumberHolder : 1,
      books: []

    }
  }

GenerateRandomNumber=()=>
{
var RandomNumber = Math.floor(Math.random() * 5000) + 1;
fetch(`https://jsonplaceholder.typicode.com/photos/${RandomNumber}`)
.then((response) => response.json())
.then(booksList => {
    this.setState({ books: booksList });
});
this.setState({
  NumberHolder : RandomNumber

})
}

  render() {
    let Image_Http_URL ={ uri: 'https://reactnativecode.com/wp-content/uploads/2017/05/react_thumb_install.png'};
    return (
   
      <View style={styles.MainContainer} >

       <Text style={{marginBottom: 10, fontSize: 20}}>{this.state.NumberHolder}</Text>
<Image
   style={{width: '100%', height: 200,resizeMode : 'stretch' }}
   source={{uri: this.state.books.url}} 
 />   
      <Text style={{marginBottom: 10, fontSize: 12}}>{this.state.books.title}</Text>
      <Text style={{marginBottom: 10, fontSize: 12}}>{this.state.books.url}</Text>
      <Text style={{marginBottom: 10, fontSize: 12}}>{this.state.books.thumbnailUrl}</Text>
       <Button title="Generate Random Number" onPress={this.GenerateRandomNumber} />
        
      </View>

    );
  }
}

const styles = StyleSheet.create(
{
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }

});

【讨论】：