如果更新 SQL 在 ReactJS 中检索到的数据，这是一种有效的方法

Question

早上好，Whosebug！

鉴于在学校和工作之间的空闲时间学习 ReactJS，我一直在尝试找出一种有效的方法来在提交新结果后刷新 SQL 检索到的数据。我为我的机械主题网站创建了一个自定义评论系统，一旦用户提交新评论，它就会将其发送到 SQL 系统。但是，我试图找到一种有效的方法来在点击提交按钮后刷新页面上的结果。我在 useEffect 钩子中尝试了运行几个依赖项，我找不到有效的方法。

我是运行 MySQL、Express、Axios、CORS 和 BodyParser

  const [reviewList, setReviewList] = useState([])

  const [submitDiv, setSubmitDiv] = useState(false)

  const toggleSubmit = () => {
    setSubmitDiv(!submitDiv)
  }

  const submitReview = (e) => {
    e.preventDefault()
    e.target.reset()
    Axios.post("http://localhost:3001/submit", {
      username: username,
      email: email,
      reviewtext: reviewtext
    })
    toggleSubmit()
  }

  useEffect(() => {
    Axios.get('http://localhost:3001/getReviews').then((response) => {
      setReviewList(response.data)
      console.log("Review list grabbed.")
    })
  }, [])

如有任何帮助，我们将不胜感激！

任何文档也将不胜感激。

Answer 1

目前，您从数据库加载的唯一时间是组件安装时。如果您可以可靠地预测当您 POST 到 http://localhost:3001/submit 时会发生什么，那么您可以在本地更新您的状态，而无需再次从数据库中获取。例如：

const submitReview = (e) => {
  e.preventDefault()
  e.target.reset()
  const newReview = {
    username: username,
    email: email,
    reviewtext: reviewtext
  }
  Axios.post("http://localhost:3001/submit", newReview)
  setReviewList(prev => [...prev, newReview]); // <--- Updating state
  toggleSubmit()
}

如果你想从数据库中获取数据以确保你有准确的数据，你可以再做一个 axios.get:

const submitReview = (e) => {
  e.preventDefault()
  e.target.reset()
  Axios.post("http://localhost:3001/submit", {
    username: username,
    email: email,
    reviewtext: reviewtext
  }).then(() => {
    return Axios.get('http://localhost:3001/getReviews')
  }).then(() => {
    setReviewList(response.data)
  });
  toggleSubmit()
}

或者使用 async/await 同样的事情：

const submitReview = async (e) => {
  e.preventDefault()
  e.target.reset()
  toggleSubmit()
  await Axios.post("http://localhost:3001/submit", {
    username: username,
    email: email,
    reviewtext: reviewtext
  })
  const response = await Axios.get('http://localhost:3001/getReviews')
  setReviewList(response.data)
}

如果更新 SQL 在 ReactJS 中检索到的数据，这是一种有效的方法

Effective way if updating SQL Data Retrieved in ReactJS

mysql

express

reactjs

axios