方法

Question

我天真的反应，我正在努力解决一些简单的问题，需要你的帮助。我需要做的就是将外部服务的值数组作为prop传递给另一个

方法

render() {
    let todolist="default";
   axios.get('http://localhost:8888/todoitems').then(function(res){
            todolist=res.data;
          });

    return (
      <div className="App">
        <input type="text" ref="newvalue"/>
         <button onClick={this.save}>Submit</button>
            <TodoList data={todolist} />
      </div>

    );
  }

会发生什么，“默认”是以this.props.data而不是来自外部服务的响应。

此外，当我尝试设置为state时，我得到“无法设置未定义的属性'状态。如下所示：

constructor(props){
        super(props);
        axios.get('http://localhost:8888/todoitems').then(function(res){
            this.state={
              data:res.data;
            }
          });
        }

请帮忙。

Answer 1

您的API请求不应出现在render方法中，因为每次组件更新时，都会调用render方法，因此会再次发出API请求。您应该在componentDidMount生命周期方法中生成API请求，然后使用可在render方法中使用的响应更新状态。如果您需要定期触发API请求，请将其放在setInterval方法中。附：不要忘记清除componentWillUnmount功能

中的间隔计时器

state = {
    todoList: "default"
}
componentDidMount() {
    axios.get('http://localhost:8888/todoitems').then((res) => {
            this.setState({todolist: res.data})
          });
}
render() {


    return (
      <div className="App">
        <input type="text" ref="newvalue"/>
         <button onClick={this.save}>Submit</button>
            <TodoList data={this.state.todolist} />
      </div>

    );
  }

Answer 2

axios.get('http://localhost:8888/todoitems').then(function(res) {
    todolist=res.data;
});

上面的代码是异步执行的。它不会暂停执行render()方法。当render()方法到达该代码时，它会调用服务器，然后立即进行处理以返回JSX，而无需等待服务器的响应。

我见过许多开发人员采用这种方法。也许你应该试一试。

constructor() {
    this.state = {todolist: "default"};
}

componentDidMount() {
    axios.get('http://localhost:8888/todoitems').then((res) => {
        this.setState({todolist: res.data});
    });
}

render() {
    return (
        <div className="App">
            <input type="text" ref="newvalue"/>
            <button onClick={this.save}>Submit</button>
            <TodoList data={this.state.todolist} />
        </div>
    );
}

使用axios获取数据并导出到组件作为props

方法

2 个答案: