Question

所以我有这个api，我正在ComponentDidMount()中发出一个get请求，以将其动态呈现到我的页面上，并且可以正常工作。我面临的问题是，当我发出发布请求以将项目添加到列表时，除非刷新它，否则它不会显示在我的网页上。后端是我的data.json，所以我不知道这是否是问题，但实质上，当我发出发布请求时，我正在向data.json添加数据，并且希望在我不刷新的情况下将其重新呈现到页面上它。

componentDidMount() {
axios.get("/api/workboard")
.then(res => {
  res.data["boardLists"].map((item, key) => {
    // console.log(Object.keys(item)[0])
    this.setState(prevState => ({
      data: [...prevState.data, item],
      titles: [...prevState.titles, Object.keys(item)[0]]
    }))
  })
  // console.log(this.state.titles)
  // console.log(this.state.data)
}).catch(err => console.log(err))
}

addListItemHandler = () => {
axios({
    method: 'post',
    url: 'api/workboard/0/list',
    data: {
      title: "Untitled" ,
      description: "No Description"
    }
})
.then(res => {
  console.log(res)
})
.catch(err => console.log(err));
}

render() {
let board = this.state.data.map((item, key) => {
  return <WorkBoardContainer 
    key={key}
    title={item[this.state.titles[key]]["title"]}
    listItems={item[this.state.titles[key]]["list"].map((i) => {
      return i["title"]
    })}
  />
})

return (
  <div className={classes.App}>
    <AddButton addListItemHandler={this.addListItemHandler}/>
    {board}
  </div>
);
}

Answer 1

尝试将获取部分作为一个单独的函数移动，并在发布请求完成后再次调用它。

componentDidMount() {
 // fetch data when component is mounted
 this.fetchData();
}

fetchData = () => {
 axios.get("/api/workboard")
 .then(res => {
  res.data["boardLists"].map((item, key) => {
    this.setState(prevState => ({
      data: [...prevState.data, item],
      titles: [...prevState.titles, Object.keys(item)[0]]
    }))
  })
}).catch(err => console.log(err))
}

addListItemHandler = () => {
axios({
    method: 'post',
    url: 'api/workboard/0/list',
    data: {
      title: "Untitled" ,
      description: "No Description"
    }
})
.then(res => {
  console.log(res);
 // fetch data again once post is done.
 this.fetchData();
})
.catch(err => console.log(err));
}

如何动态地将api重新呈现到网页上？

1 个答案: