AJAX调用中的问题1

Question

我正在学习React，我正在尝试显示来自和ajax调用的用户列表。当我添加行

时，我从CodePen收到意外的令牌错误

export default Users;

当我删除该行时，没有更多错误，但没有显示用户列表。

我的代码：

function GetUsers(project){
  $.ajax({
        url: "https://jsonplaceholder.typicode.com/users",
        success: function (data) {
            console.log(data);
            callback(null, data);
        },
        error: function (error) {
            console.log(data);
            callback(error, {});
        }
    });
}

function UserList(users) {
  const userItems = users.map((user) =>
  <ul>
    <li>
       { user.name }
    </li>
    <li>
      { user.email }
    </li>
    <li>
      { user.phone}
    </li>
  </ul>
 );


 return (userItems);  
}

class Users extends Component {

  componentDidMount() {
    GetUsers(null, function (err, data) {
      if (err)
      {
        console.log(err); 
      }// do something
      this.setState({ users: data })
    }.bind(this))
  }

  render() {
    return(
        <UserList user = {this.state.users} />
      );
  }

}


if (document.getElementById('root')) {
    ReactDOM.render(<Users />, document.getElementById('root'));
}

Here是我的代码。

感谢您的帮助！

Answer 1

AJAX调用中的问题1

function GetUsers(project){
  $.ajax({
        url: "https://jsonplaceholder.typicode.com/users",
        success: function (data) {
            console.log(data);
            callback(null, data);
        },
        error: function (error) {
            console.log(data);
            callback(error, {});
        }
    });
}

$.ajax是异步调用，这意味着它不会直接返回任何值（如果它从互联网上获取结果它是如何）它只是创建另一个函数，它将调用{{1} }和success完成后。

这就是为什么我们需要用回调来包装它

error

mount

中的问题2

function GetUsers(project, resolve = () => {}, reject = () => {}) {
}

这段代码完全错误，它甚至有语法错误，所以不值得详细讨论。

我们需要调用我们的新函数并传递成功回调以改变状态

  componentDidMount() {
    GetUsers(null, function (err, data) {
      if (err)
      {
        console.log(err); 
      }// do something
      this.setState({ users: data })
    }.bind(this))
  }

通过这种方式，我们会调用GetUsers(null, users => { this.setState({ users }); });等待它的结果，然后我们才会用新的结果改变状态

组件创建中的

3问题

React组件默认情况下没有状态，你需要从构造函数中推断出状态，所以我们需要将初始化更改为

GetUsers

否则您将获得constructor(props) { super(props); this.state = { users: false }; }，因为出于性能目的而不会自动创建状态，并且默认情况下所有组件都是Pure。

我在这里创建了一个工作沙箱

Answer 2

在

function GetUsers(project){
  $.ajax({
        url: "https://jsonplaceholder.typicode.com/users",
        success: function (data) {
            return data;
        },
        error: function (error) {
            console.log(error);
            return {};
        }
    });
}

-

success: function (data) {
    return data;
}

不符合您的想法。 return data并没有真正将数据返回到任何地方。

你需要回电。

function GetUsers(project, callback){
  $.ajax({
        url: "https://jsonplaceholder.typicode.com/users",
        success: function (data) {
            callback(null, data)
        },
        error: function (error) {
            callback(error, {})
        }
    });
}

class Users extends Component {
  componentDidMount() {
    GetUsers(null, function (err, data) {
      if (err) // do something
      this.setState({ users: data })
    }.bind(this))
  }

  render() {
    return(
      <UserList user = {this.state.users} />
    );
  }
}

你也可以Promise - 如果要简化逻辑

从Ajax请求中反映显示项目列表

2 个答案:

AJAX调用中的问题1

mount

3问题