Question

我正在尝试将一些数据呈现到我的页面上，但是我收到错误“Uncaught TypeError：this.props.getAllContacts不是一个函数”并且似乎无法追踪原因。它说错误来自这一行：“this.props.getAllContacts（）;”。我一直在谷歌搜索几个小时。

export default class List extends Component {
  componentWillMount() {
    this.props.getAllContacts();
  }

  showContacts(contacts) {
    return contacts.map((render, index) => {
      return (
        <ul key={index} className="results-container">
          <li>{render.first_name}</li>
          <li>{render.last_name}</li>
          <li>{render.email}</li>
          <li>{render.phone_number}</li>
          <li>{render.status}</li>
        </ul>
      );
    });
  }

  render() {
    const contacts = this.props.getAllContacts;

    return (
      <div className="list">
        <br/>
        <h1>All Contacts</h1>
        {this.showContacts(contacts)}
      </div>
    );
  }
}


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

  getAllContacts() {
    fetch('/contacts')
    .then(r => r.json())
    .then((results) => {
      this.setState({
        contacts: results.data,
      });
      console.log(this.state);
    })
    .catch(err => err);
  }

  render() {
    return (
      <div className="App">
        <div className="nav">
          <Nav />
        </div>
        <div className="props">
          {this.props.children}
          <List
            contacts={this.state.contacts}
            getAllContacts={this.getAllContacts.bind(this)}
          />
        </div>
      </div>
    );
  }
}

感谢任何帮助，谢谢。

Answer 1

看起来你正在使用this.props.getAllContacts作为一个函数（在componentWillMount中）和一个联系人列表（在渲染中）。我认为您应该只更新List中的render方法以使用从父组件传入的联系人列表。

  render() {
    const contacts = this.props.contacts;
    return (
        <div className="list">
        <br/>
        <h1>All Contacts</h1>
        {this.showContacts(contacts)}
      </div>
    );
  }

未捕获的TypeError：this.props.getAllContacts不是函数

1 个答案: