Ошибка типа: MemberStore.members.map не является функцией - PullRequest
Новая
       8

Ошибка типа: MemberStore.members.map не является функцией

0 голосов
/ 11 декабря 2018

Я создаю небольшое веб-приложение, используя React и Mobx.Затем конечным результатом является связь с бэкэндом Rails, который я настроил.Теперь я создал MemberStore, у которого есть метод async fetchAll (). 

import {observable, action, computed} from 'mobx';

class MemberStore {
@observable members = [];
@observable isLoading = false;

@action async fetchAll() {
    this.isLoading = false;
    const response = await fetch('http://localhost:3000/v1/members');
    const status = await response.status;
    if (status === 200) {
        this.members = response.json();
    } 

}

Теперь это связано с моей страницей контактов, которая имеет метод жизненного цикла React componentWillMount.Когда он пытался визуализировать элементы, используя функцию карты, я получаю сообщение об ошибке выше.Ниже приведен код для страницы контактов. 

class Contact extends Component {
componentWillMount(){
    this.props.MemberStore.fetchAll();
}
handleSubmit = (e) => {
    e.preventDefault();

    const name = this.member.value;
    const email = this.email.value;
    // const email = this.email.value;
    this.props.MemberStore.addMember({name, email});
    this.member.value = '';
    this.email.value = '';
}
render() {
    const {MemberStore} = this.props;

    return (
        <div>
            <Navbar />
            <Jumbotron title="Contact Page" subtitle="You want to get in   touch"/>
            <div className="container">
               <h2>You have {MemberStore.memberCount} members.</h2>

               <form onSubmit={e => this.handleSubmit(e)}>
                   <input type="text" placeholder="Enter Your Name" ref={input => this.member = input }/>
                   <div>
                   <input type="text" placeholder= "Enter Your Email" ref={input => this.email = input }/>
                   </div>
                   <button>Submit</button>
               </form>
               <ul>
                {MemberStore.members.map(({name, email}, index) => (
                    <li key={index}>
                    <div>
                        name: {name}
                    </div>
                    <div>
                        email: {email}
                    </div>
                    </li>
                ))}
              </ul>
            </div>
            <Footer />
        </div>
      )
  }
 }

Любая помощь будет оценена.

1 Ответ

0 голосов
/ 11 декабря 2018

response.json() - это обещание, поэтому вам также нужно await.Предполагая, что ваш API возвращает массив в качестве ответа, он должен работать: 

@action async fetchAll() {
    this.isLoading = false;
    const response = await fetch('http://localhost:3000/v1/members');
    const status = await response.status;
    if (status === 200) {
        this.members = await response.json();
    }
}
...