React Native - FlatList делает запрос на получение для каждого элемента в renderItems - PullRequest
Новая
       17

React Native - FlatList делает запрос на получение для каждого элемента в renderItems

0 голосов
/ 25 октября 2018

Я хочу сделать get запрос для каждого элемента в моем renderItems(), поэтому я делаю это так: 

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

Но я получаю ошибку для:

ReferenceError: eachItem не определен

Я попытался преобразовать renderItems в async функцию и использовать await, но я получаю другую ошибку!

Любое решение...?

ОБНОВЛЕНИЕ

Я использовал var eachItem = [] вне функции axios 'then, но теперь я получаю:

TypeError: Cannot read property'LVal18AFC 'не определено!

Ответы [ 3 ]

0 голосов
/ 25 октября 2018

вы сделали плохую практику вызова API, я предлагаю создать отдельный компонент для каждой строки, которую вы хотите отобразить, и внутри строки вызвать API, который вы хотите

, в соответствии с вашим кодом 

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

    componentDidMount() {
        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>
        );
    }
}
0 голосов
/ 25 октября 2018

@ Джигар прав.Почему это не работает: когда вы вызываете функцию renderItems, js смотрит на асинхронный вызов и помещает его в цикл обработки событий для последующего выполнения.Затем он переходит и регистрируется на вашей консоли eachItem, которая сейчас не определена.Затем визуализирует ваш JSX и затем выполняет асинхронный вызов (т. Е. Запрос axios), когда запрос возвращает данные, он просто сохраняется в eachItem, что входит в область действия функции axios.

0 голосов
/ 25 октября 2018

Это проблема с областью видимости.Использование ключевого слова let в функции, переданной вашему обещанию GET, означает, что она доступна только внутри этой функции.

Я бы фактически предложил абстрагировать вещи в компонент, который будет управлять своим собственным соответствующим вызовом axios.,Как то так: 

class Item {
  componentWillMount(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 } /> } />
}
...