Question

我对开发非常陌生，可以使用一些指导。从外部API检索数据后，我试图从后端提供数据，该API可以在控制台/后端查看响应数据。但是，当我在React中修改状态并尝试在前端使用该数据时，状态仍然是未定义/空字符串。

两台服务器都在不同的端口上运行并且可以正常通信。

App.js（前端）

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      apiResponse: '',
      products: ''
    };
  }

  // Fetch a varying API route based on the argument
  callAPI(x) {
    fetch("http://localhost:8080/" + x)
      .then(res => res.json())
      .then(res => this.setState({ apiResponse }))

      .catch(err => err);
  }

<Button
    onClick={(e) => { e.preventDefault(); this.callAPI('api') }}
    type="success"
    className="input-lg">
    Records
</Button>

api.js（后端）

router.get('/api', function (req, res) {
   axios.get('https://.......................',  config)
        .then((res) => {
            console.log(res.data);
        })
        .catch((error) => {
            console.log(error);
        });
})

非常感谢您的帮助！

Answer 1

您是否已经尝试使用重定向响应？

就是这样：

    return axios.get('https://.......................',  config)
         .then((resp) => {
            const url = "http://<yourfront:yourport>/"
                    .concat("?yourData="+resp.data);
            res.location(url.toString());
            res.status(301);
            res.end();
            return;
         })
        .catch((error) => {
           console.log(error);
        });

因此，当front收到此响应时，框架知道它需要更改自己的状态。

Answer 2

您需要在构造函数中绑定callAPI

constructor(props) {
  super(props);
  this.state = {
    apiResponse: '',
    products: ''
  };

  this.callAPI = this.callAPI.bind(this); // bind callAPI

}

https://reactjs.org/docs/handling-events.html

Answer 3

这是一个简单的API调用以及随后的获取状态的示例。

class MyComponent extends Component{
    state ={
        data : null
    }
    //Ideal place to fetch data
    componentDidMount(){
        axios.get('myapi/data')
            .then(res => this.setState({ data }))
    }
    render(){
        return(
            <div>
                {data}
            </div>
        )
    }
 }

这样，您可以确保仅在API调用结束时才呈现数据。在第一个渲染中，data道具将为空，因此一旦在div中完成调用并解析为实际数据{{1 }}您更新状态

通过后端快递服务器的响应修改状态

3 个答案: