javascript - React Native - FlatList make get request for each item in renderItems - Stack Overflow

admin管理员组

文章数量:1327284

I want to make a get request for each item in my renderItems() so I make it like this:

renderItems({ item }) {
  axios.get(Utilities.url + "Symbol/" + item.Id).then(response => {
    let eachItem = response.data;
  });

  console.log(eachItem);

  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "flex-end",
        alignSelf: "stretch",
        marginRight: 2
      }}
    >
      <Text
        style={{
          color: Colors.WHITE,
          fontSize: 16
        }}
      >
        {eachItem.LVal18AFC}
      </Text>
    </View>
  );
}

But I get the error for:

ReferenceError: eachItem is not defined

I tried to convert the renderItems to an async function and use await but I get another error!

Any solution...?

UPDATE

I used var eachItem = [] outside the axios' then function but now I'm getting:

TypeError: Cannot read property 'LVal18AFC' of undefined!

I want to make a get request for each item in my renderItems() so I make it like this:

renderItems({ item }) {
  axios.get(Utilities.url + "Symbol/" + item.Id).then(response => {
    let eachItem = response.data;
  });

  console.log(eachItem);

  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "flex-end",
        alignSelf: "stretch",
        marginRight: 2
      }}
    >
      <Text
        style={{
          color: Colors.WHITE,
          fontSize: 16
        }}
      >
        {eachItem.LVal18AFC}
      </Text>
    </View>
  );
}

But I get the error for:

ReferenceError: eachItem is not defined

I tried to convert the renderItems to an async function and use await but I get another error!

Any solution...?

UPDATE

I used var eachItem = [] outside the axios' then function but now I'm getting:

TypeError: Cannot read property 'LVal18AFC' of undefined!

• javascript
• reactjs
• react-native
• async-await
• axios

Share Improve this question Follow edited Oct 25, 2018 at 7:59 MoKhajavi75 asked Oct 25, 2018 at 7:40 MoKhajavi75MoKhajavi75 2,71255 gold badges3131 silver badges5757 bronze badges 5

• Put let eachItem outside axios first, you are not in same scope. – MatrixTXT Commented Oct 25, 2018 at 7:45
• I use var outside the function but now I'm getting error for `Cannot read property 'InsCode' of undefined! – MoKhajavi75 Commented Oct 25, 2018 at 7:54
• Hey, are you making this call inside your render function? You cannot make async calls inside the render function. – Yash Kalwani Commented Oct 25, 2018 at 8:05
• @YashKalwani - No! the items are dynamic so I have to make request for each! – MoKhajavi75 Commented Oct 25, 2018 at 8:07
• The question says FlatList makes get request. Your FlatList has to be inside the render function. And the FlatList makes the async call. Hence, you are making a async call inside the render of your class which won't work. – Yash Kalwani Commented Oct 25, 2018 at 8:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

@Jigar is correct. Why it is not working: When you call the renderItems function js looks at the asyn call and puts it into its event loop for execution later. It then moves on and logs to your console eachItem which is undefined right now. Then renders your JSX and then executes the async call ( i.e axios request ) when the request serves the data back it is simply store in eachItem which is in the scope of the axios function.

you did a bad practice in calling API, what I suggest is, create a separate ponent for each row you want to display and inside a row call an API you want

so according to your code

class Row extends Component {
    constructor() {
        super()
        this.state = {
            eachItem: null
        }
    }

    ponentDidMount() {
        const { item } = this.props;
        axios.get(Utilities.url + "Symbol/" + item.Id).then(response => {
            this.setState({eachItem: response.data});
        });
    }

    render() {
        return (
            <View
                style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "flex-end",
                    alignSelf: "stretch",
                    marginRight: 2
                }}
            >
                <Text
                    style={{
                        color: Colors.WHITE,
                        fontSize: 16
                    }}
                >
                    {this.state.eachItem ? this.state.eachItem.LVal18AFC : null}
                </Text>
            </View>
        );
    }
}

This is a scoping issue. Using the let keyword in the function passed to your GET promise, means it's only accessible inside that function.

I'd actually suggest abstracting things into a ponent, which will manage its own respective axios call. Something like this:

class Item {
  ponentWillMount(props) {
    axios.get(Utilities.url + "Symbol/" + props.Id).then(response => {
      this.setState({
        data: {
          ...this.state.data,
          ...response.data,
      })
    });
  }

  render() {
    if (!this.state.data) {
      return null;
    }

    return (
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "flex-end",
          alignSelf: "stretch",
          marginRight: 2
        }}
      >
        <Text
          style={{
            color: Colors.WHITE,
            fontSize: 16
          }}
        >
          { this.state.data.id }
        </Text>
      </View>
    );
  }
}

function Parent(props) {
  <FlatList renderItem={ ({ item }) => <Item id={ item.id } /> } />
}

本文标签： javascriptReact NativeFlatList make get request for each item in renderItemsStack Overflow