如何使用post将server.js中的React组件呈现给App.js？

作者: polo
发布时间: 2024-10-16 11:32:12 (4天前)
转自：

3 条回复

0#
回复此人
真不错 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这种东西很好地解释了 <a href="https://reactjs.org/docs/state-and-lifecycle.html" rel="nofollow noreferrer"> 文档 </A> 。 </p> <P> 每次执行API请求时都需要使用state，因为它是一种副作用。我建议您阅读文档并理解它，但要使其在您的组件中工作，请在组件的开头添加： </p> <pre> <code> class BlaBla extends Component { state = { response: undefined }; /* Rest of component code */ } </code> </pre> <P> 并将您的获取请求更改为如下所示： </p> <pre> <code> fetch('/', { method: 'POST' }).then(response => this.setState({response})); </code> </pre> <P> 通过添加状态，您也会遇到绑定问题，因此将方法声明更改为箭头函数，由此： </p> <pre> <code> handleSubmit(event) { /* code */ } </code> </pre> <P> 对此： </p> <pre> <code> handleSubmit = (event) => { /* code */ } </code> </pre> <P> 要在答案段落中显示结果，请执行以下操作： </p> <pre> <code> <p> Answer: {this.state.response} </p> </code> </pre> </DIV>

编辑
1#
回复此人
电动少女 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 基本上，您需要将获取调用的结果保存到组件状态。使用setState，它将自动触发组件的重新呈现并显示新的答案。 </p> <P> 试试这个： </p> <pre> <code> handleSubmit(event) { event.preventDefault(); // assuming the fetch works ok... fetch('/', { method: 'POST' }).then(response => response.json().then(data => this.setState({answer:response}) ) ) } </code> </pre> <P> 然后在render（）里面： </p> <pre> <code> <div style={{display: 'flex', justifyContent:'center', alignItems:'center'}}> <p>Answer:{this.state.answer}</p> <p>Question count: {this.state.count}</p> </div> </code> </pre> <P> 编辑： </p> <P> 您可能需要将响应解析为json，例如 </p> <pre> <code> fetch('/', { method: 'POST' }).then(response => this.setState({answer:JSON.parse(response)}) ) </code> </pre> </DIV>

编辑

登录后才能参与评论