发布请求 api 反应后重新渲染组件答案

【问题标题】：re-render component after post request api react发布请求 api 反应后重新渲染组件
【发布时间】：2020-02-10 02:27:22
【问题描述】：

发布请求后，数据进入数据库，但不会重新渲染组件。我需要手动按下 F5 按钮，新的数据就会显示出来。 then 似乎没有执行。

class AddForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            id: null,
            title: "",
            price: 0,
            pages: 0,
        };
    }

    postData() {
        const { title, price, pages } = this.state
        const curTitle = title
        const curPrice = price
        const curPages = pages
        fetch("api/books", {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                Title: title,
                Price: price,
                NumberOfPages: pages
            })
        }).then(res => res.json()).then(() => this.setState({ title: curTitle, price: curPrice, pages: curPages }))
    }
}

编辑：当我执行以下操作时：

.then(response => response.json()).then(res => console.log(res))

我收到Uncaught (in promise) SyntaxError: Unexpected end of JSON input

【问题讨论】：

什么时候调用 postData 函数？
如果在then() 中添加console.log() 而不是this.setState() 会发生什么？
@HadiRanjbar，当我在表单中按 handleSubmit 时。
@norbitrial，当我这样做时：.then(response => console.log(response))，我得到Unexpected end of JSON input
查看这篇文章，可能对你有帮助：stackoverflow.com/questions/43362431/…

标签： javascript reactjs

【解决方案1】：

从您的问题来看，您似乎可以在提交时更新状态，唯一的问题是关于显示数据，因为我可能建议您放置另一个组件来显示数据。过去它对我有用。请让我知道它是否适合您。

【讨论】：

【解决方案2】：

res => res.json()：这给出一个 JSON 响应，将此 JSON 响应值绑定到 setState 中的状态。

希望您的回复如下所示，

response.data = {
   curTitle: 'some title',
   curPrice: 'some price',
   curPages: 'some pages'
}

第二次更改您的 fetch 调用，然后如下所示，

constructor(props) {
   super(props)
   this.state = {
      id: null,
      title: "",
      price: 0,
      pages: 0,
   };
   this.postData = this.postData.bind(this); // Add this line, cannot read property error will be gone.
}

fetch("api/books", {
    method: "POST",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        Title: title,
        Price: price,
        NumberOfPages: pages
    })
}).then(res => res.json()).then((responseJson) => {
  console.log(responseJson); // what is the output of this?
  this.setState({
    title: responseJson.data.curTitle,
    price: responseJson.data.curPrice,
    pages: responseJson.data.curPages
  })
})

【讨论】：

我试过这个解决方案，但它没有显示新数据。
console.log(response) 的输出是什么？
在尝试我的解决方案时，您是否遇到任何错误？
Uncaught (in promise) SyntaxError: Unexpected end of JSON input at 当我 console.log(response)
更改第二个然后像上面那样回调并告诉我控制台打印的内容是什么？