Question

我正在尝试创建一个简单的收件箱，它进行api调用并返回包含消息列表的json对象。然后通过props将其传递给'InboxList'，然后传递给'InboxItem'组件。但是，我正在努力获取道具以呈现每个项目。

我在使用bind（this）时也收到错误，如下所示。

index.js:28 Uncaught (in promise) TypeError: (intermediate value).bind is not a function(…)

我认为我需要在我的componentDidMount方法中绑定由于es6语法，但我不明白错误引用的内容。 Fwiw json数据成功回归。

任何关于此的线索都将非常受欢迎

export default class Inbox extends Component {
  constructor() {
    super();
    this.state = {
      messages: [],
    };
  }

  componentDidMount() {
    this.serverRequest = axios.get('/api/messages')
      .then(res => {
        console.log(res.data);
      })
      .catch(res => {
        if (res instanceof Error) {
          console.log(res.message);
        } else {
          console.log(res.data);
        }
        this.setState({
          messages: res.data,
        }.bind(this));
      });
  }

  render() {
    return (
      <div>
        <InboxHeader />
        <InboxList messages={this.state.messages} />
      </div>
    );
  }
}

export default class InboxList extends Component {
  render() {
    return (
      <ul className="dm-inbox__list">
        {this.props.messages.map(message =>
          <InboxItem message={message} />
        )}
      </ul>
    );
  }
}

Answer 1

请阅读此内容以获取更多信息http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/ 下面给你一个修复。不需要约束承诺 https://www.toptal.com/javascript/10-most-common-javascript-mistakes

＆＃13;

xport default class Inbox extends Component {
  constructor() {
    super();
    this.state = {
      messages: [],
    };
  }

  componentDidMount() {
    //serverRequest remove it 
    //this.serverRequest = axios.get('/api/messages')
     
        axios.get('/api/messages')
        .then((response)=>{
          console.log(response);
          if(response.status===200){
            return response.data;
          } else {
            throw new Error("Server response wasn't ok");
          }

        })
        .then((responseData)=>{
          this.setState({messages:responseData});
        }).catch((error)=>{
          
        });
  }

  render() {
    return (
      <div>
        <InboxHeader />
      //the messages array might be still empty cause the network call is async so do a check in the inbox list
        <InboxList messages={this.state.messages} />
      </div>
    );
  }
}

export default class InboxList extends Component {
  render() {
    //check if null or empty if not yet resolved show loading eg spinner 
    if(!this.props.messages){
       return <div>loading....</div>;
     }
    return (
      <ul className="dm-inbox__list">
        {this.props.messages.map(message =>
          <InboxItem message={message} />
        )}
      </ul>
    );
  }
}

＆＃13;

import React, {Component} from 'react';

export const fetchResource = msg => WrappedComponent =>
  class extends Component {
    constructor(props){
      super(props);

      this.state = {
        resource: null,
        msg: null
      };
    }

    componentDidMount(){
      this.setState({msg})
        axios.get('https://api.github.com/users/miketembos/repos')
        .then((response)=>{
          console.log(response);
          if(response.status===200){
            return response.data;
          } else {
            throw new Error("Server response wasn't ok");
          }

        })
        .then((responseData)=>{
          this.setState({resource:responseData});
        }).catch((error)=>{
          this.props.history.pushState(null, '/error');
        });
    }

    render(){
      const {resource} = this.state
      return <Posts {...this.props} {...resources } />
    }
  }

＆＃13;

React - 将道具传递给'ES6 extends'组件，并正确使用'bind'

1 个答案: