Question

我正在使用React和Mobx构建一个小型Web应用程序。然后最终结果是与我已设置的Rails后端进行通信。现在，我创建了一个具有异步fetchAll（）方法的MemberStore。

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

任何帮助将不胜感激。

Answer 1

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

TypeError：MemberStore.members.map不是函数

1 个答案: