javascript - react JS : Get data from api and send to child component

Question

我有点迷路了。我想从我的 API 获得响应并将数据发送到子组件。似乎我不明白该怎么做，因为它对我说:“类型错误:无法读取未定义的属性‘setState’”

你能给我解释一下我该怎么做吗？这是我的代码片段:

function GetData(url, params, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url + '?' + params, true);
    xhr.onreadystatechange = function(e) {
        if (this.readyState === xhr.DONE) {
            if (this.status === 200) {
                callback(JSON.parse(xhr.responseText));
            } else {
                console.log('error');
           }
        }
    }
    xhr.send(null);
}

class Utilisateurs extends Component {
    constructor(props){
        super(props);
        this.state = {users:''}
        GetData('http://localhost:3333/shop/users', 'login=true', 
            function(res) {
               this.setState({users: res});
            }
        )

    }

    render() {
        return (
        <div id="center">             
            <UserListSorted data={this.state.users}></UserListSorted>
        </div>
        );
    }
}

所以我发出了一个 GET 请求，我想通过响应更改“用户”的状态，这样我就可以打印一个用户列表。但我不知道如何解决这个问题。

感谢您的帮助!

Answer 1

这里发生了几件事。

首先，您不应该在constructor 或componentWillMount() 中发出网络请求。有人可能会称其为反模式。

您不应该从 constructor 执行任何长时间运行的任务，因为这会使组件加载时间更长。这是一个很好的一般规则。只需使用它来设置变量和属性并触发其他类方法，快速设置。我记不清了，但这可能是同步与异步行为的问题。构造函数是一个方法。它是一个函数，因此如果您挂起等待网络请求的线程，组件必须等待才能继续。

componentWillMount()也是如此。该生命周期方法在组件安装到 DOM 之前启动，这意味着如果您发出网络请求并且它在组件安装之前完成，则无需设置状态。 DOM 中还没有组件需要设置状态。这是以前有人告诉我的，它一直困扰着我。我现在只是告诉你，希望能给你同样的领悟时刻。

您可以从 componentDidMount() 执行此操作，因为组件已准备就绪，但如果您从内部调用 this.setState() ，它将触发另一次重新渲染生命周期方法。有些人将“setState inside componentDidMount”称为反模式，但它并没有那么糟糕。我会说使用它，但要注意它确实会触发重新渲染。渲染方法将至少运行两次。如果你有一个大的、复杂的组件或许多组件，它可能会导致性能问题。这就是为什么人们说“不要这样做”。

展望 future ，我建议创建一个名为 getData() 或其他名称的类方法，然后从 componentDidMount() 中调用它。像这样:

class Something extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: '',
    }
  }

 componentDidMount() {
    this.getData()
  }

 getData() {
  // get data from server
  const theData = 'we got some data'
  this.setState({
    data: theData,
  })
 }

 render() {
   return <div>{this.state.data}</div>
 }
}

我实际上无法完全帮助您处理 XHR 请求，因为我已经很久没有使用它了。我无法验证您的语法是否正确。我建议使用名为 request 的库 https://www.npmjs.com/package/request .我想 XHR 请求可以正常工作，但将请求作为学习练习检查。