Нужно решение для извлечения данных из массива, а затем отправить его в состояние, используя для каждого - PullRequest
Новая
       72

Нужно решение для извлечения данных из массива, а затем отправить его в состояние, используя для каждого

0 голосов
/ 24 сентября 2019

Нужно решение для извлечения данных из API, а затем перевести его в состояние, используя forEach только оператор 

constructor() {
        super()
        this.state = {
            char: [],
            loading: false
        }
    }
componentDidMount() {
        this.setState({loading: true})
        fetch("/*someURL*/")
            .then(response => response.json())
            .then(data => {
               data.forEach(item =>{
                   this.setState({
                            loading: false,
                            char: this.state.char.push(item)
                })
            })
            })
    }
 render() {
        const text = this.state.loading ? "loading..." : this.state.character.data

        return (
            <div>
                <p>{text}</p>
            </div>
        )
    }}

данные в моем URL:

{"page":1,"per_page":6,"total":12,"total_pages":2,"data":[{"id":1,"email":"@reqres.in","first_name":"abc","last_name":"cba"},{"id":2,"email":"@reqres.in","first_name":"def","last_name":"fed"},{"id":3,"email":"@reqres.in","first_name":"ghi","last_name":"ihg"},{"id":4,"email":"t@reqres.in","first_name":"jkl","last_name":"lkj""},{"id":5,"email":"@reqres.in","first_name":"mno","last_name":"onm"},{"id":6,"email":"@reqres.in","first_name":"pqr","last_name":"rqp"}]}

И может использовать оператор forEach в любом месте для правильного получения данных

Ответы [ 3 ]

2 голосов
/ 24 сентября 2019

Попробуйте вместо этого: 

...
.then(data => {               
    this.setState({
        loading: false,
        char: [...this.state.char, ...data]
    })
})
...

Обновление ответа, чтобы соответствовать всем вашим свойствам из вашего ответа.Я предполагаю, что this.state.char должен содержать только данные из result.data

//Notice that I changed the parameter name to result
.then(result => {               
    this.setState({
        loading: false,
        char: [...this.state.char, ...result.data],
        page: result.page,
        per_page: result.per_page,
        total: result.total,
        total_pages: result.total_pages
    })
})

В качестве альтернативы вы можете просто развернуть весь объект: 

.then(result => {               
    this.setState({
        loading: false,
        ...result
    })
})

Но тогда ваш массив не будет сохранен вthis.state.char а точнее this.state.data

Для получения дополнительной информации об операторе спреда ... вы можете посмотреть здесь .

TLDR;По сути, он берет любой объект или массив {name: "Dennis", age: 29}, раскрывает его и объединяет с любым объектом, в который вы распространяете его «в»:

const myObj = { ...{ name: "Dennis", age: 29"}, email: "myemail@example.com" }

=

const myObj = { name: "Dennis", age: 29, email: "myemail@example.com" }

0 голосов
/ 24 сентября 2019

Попробуйте вот так 

fetch("/*someURL*/")
.then(response => response.json())
.then(result => {
    this.setState({
       loading: false,
       char: [...this.state.char, ...result.data]
    })
 })

В приведенном ниже коде используется оператор распространения, чтобы объединить существующие данные о состоянии с вновь полученными данными из API.Он называется оператором распространения (...). 

[...this.state.char, ...result.data]

Для получения более подробной информации перейдите по этой ссылке https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

0 голосов
/ 24 сентября 2019

Вы можете использовать spread operator и просто сделать. 

.then(data => {
const {char} = this.state;

this.setState({
  loading: false,
  char: [...char, ...data]

})

})
...