Блог

Я пытаюсь получить данные с этого веб-сайта: https://reactnative.dev/movies.json

Я использую следующий код:

 fetch("https://reactnative.dev/movies.json")
    .then(response => response.json())
    .then((responseJson) => {
        
        setTimeout(() => {
            this.setState({
                loading: false,
                dataSource: responseJson
            })
        }, 2000)

        Alert.alert(responseJson)

    })
    .catch(error => console.log(error))


    return (
        <FlatList
            data={DATA}
            renderItem={renderItem}
            keyExtractor={item => item.id}
            refreshControl={
                <RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme].auxiliaryText} />
            }
        />

    
    );
};
 

Моя проблема в том, что Alert.alert (responseJSON) выдает следующую ошибку:
Эта ошибка

… и я хотел бы получить данные для плоского списка.

Кто мне поможет, пожалуйста?

Обновить:

 ...

constructor(props) {
        super(props);
        this.state = {
            moviesList: '',
        };
    }

... 
renderScroll = () => {
        const { moviesList } = this.state;

    fetch("https://reactnative.dev/movies.json")
        .then(response => response.json())
        .then((responseJson) => {
            
            setTimeout(() => {
                this.setState({
                    loading: false,
                    moviesList: responseJson.movies
                })
                Alert.alert(moviesList)
            }, 2000)
        })
        .catch(error => console.log(error))

...
 

Я хотел бы, чтобы Alert.alert получал данные. То есть извлеките данные из функции выборки.

Если внутри Alert.alert я помещу responseJSON.movies, если появятся данные, но если я помещу список фильмов, он не будет

Если я опубликую следующее в консоли браузера, он отправит мне неопределенную ошибку. Я просто хочу получать данные извне функции.

 fetch("https://reactnative.dev/movies.json")
.then(response => response.json())
.then((responseJson) => {

    setTimeout(() => {
        this.setState({
            loading: false,
            moviesList: responseJson.movies
        })

    }, 2000)
})
.catch(error => console.log(error))

alert(this.moviesList)
 

Вы должны распечатать данные своего ответа с помощью консоли.войдите в систему и убедитесь, что это данные ответа. В соответствии с вашей ошибкой, я думаю, что вы получаете данные типа объекта после извлечения, но вам нужно назначить строку в Alert.alert, поэтому я предлагаю вам попробовать следующее.

 Alert.alert(responseJson.title)
 

Я только что протестировал этот код, кажется, он работает. Это то, что вы ищете?

с помощью currElement у вас есть доступ к снимаемому объекту.

 import { useEffect, useState } from "react"
function Home() {
  const [isLoading, setLoading] = useState(true)
  const [data, saveData] = useState([])

  useEffect(() => {
    fetch("https://reactnative.dev/movies.json")
      .then(response => response.json())
      .then(responseJson => {
        console.log(responseJson.movies)
        saveData(responseJson.movies)
        setLoading(false)
      })
      .catch(error => console.log(error))
  }, [])
  console.log(data)

  return isLoading ? (
    <p> i am loading</p>
  ) : (
    <ul>
      {data.map(currElement => (
        <li key={currElement.id}> {currElement.title}</li>
      ))}
    </ul>
  )
}