提交时未保存 React 组件数据

Question

下面是我的代码，React 应用程序连接到 Node js，提交时会保存评论数据，但它不适用于 StarRating 组件。评论数据保存在数据库 table 而不是评分

Answer 1

我认为问题在于您正在访问 App 组件中的 rating 状态，但具有该值的真实状态是 rating 状态星级组件。此外，您已将道具 onChange 和 value 传递给 StarRating 组件，但道具概念不同于 HTML 属性概念，因此您肯定需要调查一下。无论如何，可能的解决方案可以是...

import * as React from 'react';
import './App.css';
import StarRating from './StarRating';
import StarRating2 from './StarRating2';
import StarRating3 from './StarRating3';
import { TextArea } from 'semantic-ui-react';
import AlertDialogSlide from './confirmation';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import Slide from '@mui/material/Slide';
import Button from '@mui/material/Button';
import { useState } from "react";


const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});


function App() {
 const [open, setOpen] = React.useState(false);

 const [comment, setComment] = useState("");
 const [rating1, setRating1] = useState("");

 const handleClickOpen = () => {
  setOpen(true);
 };

 const handleClose = () => {
 setOpen(false);
 };

 const onSubmitForm = async e => {
 e.preventDefault();
 try {
  const body = {  rating1, comment };
  const response = await fetch("http://localhost:5000/feedback", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body)
  });

  window.location = "/";
} catch (err) {
  console.error(err.message);
}

};


 return (

<form onSubmit={onSubmitForm} >

<div className="App">
 <img src='solavievelogo.png'></img>
  <hr/>
  <h2>Leave a feedback!</h2>
 <StarRating setRating={setRating1} />
 <hr2/>
 <StarRating2></StarRating2>
 <hr2/>
 <StarRating3></StarRating3>
 <hr2/>

 <p>Please leave a comment about your experience below:</p>
 <TextArea  placeholder=' Type your comment here...' 
  value={comment}
  onChange={e => setComment(e.target.value)}
  ></TextArea>
 <br/>
<button class="Button" type='submit'  variant="outlined" onClick={handleClickOpen}><span class="Button-inner">SEND FEEDBACK</span> </button>

<Dialog
    open={open}
    TransitionComponent={Transition}
    keepMounted
    onClose={handleClose}
    aria-describedby="alert-dialog-slide-description"
  >
    <DialogContent>
    <img src='confirm.png'></img>
      <DialogContentText id="alert-dialog-slide-description">
      <p>Thank you for your message!</p>
      <p> We will be in contact soon..</p>
      </DialogContentText>
    </DialogContent>
    <DialogActions >
    <button class="Button" type='submit'  onClick={handleClose} ><span class="Button-inner">Close</span> </button>
    </DialogActions>
  </Dialog>
</div>

</form>

);
}

export default App;

星级组件

import React, { useState} from "react";
import { FaStar } from 'react-icons/fa';
const StarRating = ({setRating}) =>{

const [hover, setHover] = useState(null);
return <div>
    
    <p>Rate your experience from 0 to 5 stars</p>
    {[... Array(5)].map((star, i)=>{
        const ratingValue= i + 1;
        return (
            <label>
                <input 
                type="radio"
                name="rating" 
                value={ratingValue}
                onClick={() =>setRating(ratingValue)} />
                <FaStar 
                className="star" 
                color={ratingValue <= (hover || rating) ? "#11C4B0" : "#D3D3D3"}
                size={40}
                onMouseEnter={() =>setHover(ratingValue)}
                onMouseLeave={() =>setHover(null)}
                />

            </label>

        );
    })}

    
    </div>
    
  }
  export default StarRating;

Answer 2

请在 starComponent 中将 setRating 作为 props 传递

如下所示：

<StarRating rating={rating1} updateRating={(e) => setRating1(e)}
  onChange={e => setRating1(e.target.value)}></StarRating>

现在您将在 starComponent 中获得 updateRating 作为道具。所以像下面这样更新评分表星组件：

import React, { useState} from "react";
import { FaStar } from 'react-icons/fa';
const StarRating = ({rating, updateRating}) =>{ // Here you will get setRating state(State of app component) in props

// const [rating, setRating] = useState(null); // not needed this state here. Update rating value in state which comes form props
const [hover, setHover] = useState(null);
return <div>
    
    <p>Rate your experience from 0 to 5 stars</p>
    {[... Array(5)].map((star, i)=>{
        const ratingValue= i + 1;
        return (
            <label>
                <input 
                type="radio"
                name="rating" 
                value={rating}
                onClick={() =>updateRating(ratingValue)} /> // Update `updateRating` state which comes from app component. 
                <FaStar 
                className="star" 
                color={ratingValue <= (hover || rating) ? "#11C4B0" : "#D3D3D3"}
                size={40}
                onMouseEnter={() =>setHover(ratingValue)}
                onMouseLeave={() =>setHover(null)}
                />

            </label>

        );
    })}

    
    </div>
    
  }
  export default StarRating;

如果 starComponent 发生任何更改，您将在应用程序组件的 rating1 中获得更新状态。

提交时未保存 React 组件数据

React component data not saved when submit

postgresql

components

node.js

reactjs