我如何使用反应打字稿构建评论部分

Question

我想知道如何使用 react typescript 创建评论部分，我希望用户输入名称和评论，然后将其发送到我的 firebase 项目。我也想如果制作的cmets可以显示在评论表的正下方，下面的代码就是我所能做的，请问我该如何处理

import React, { EventHandler, FormEventHandler, useState, FC } from 'react'
import { Box, Button, Grid, TextField } from '@material-ui/core';
import axios from "axios";

interface FormData {
  user: string;
  comment: string;
  
}


const Comment: FC<FormData> = ({}) => {
  

  const [formData, setFormData] = useState({ user: "", comment: ""})

  const handleChange = (e) => {
      const { value, name } = e.target;
      setFormData({ ...formData, [name]: value })
      console.log(formData)
  }

  const handleSubmit = async (e) => {
    e.preventDefault();
        const response = await axios.post('/api/comments/index', formData);
}


  return (
    <Box component="form"
                my={3}
            >
                <Grid container
                    direction="row"
                    justify="center"
                    alignItems="flex-end"
                    spacing={2}
                >
                    <Grid item xs={6}>
                        <TextField id="outlined-basic" label="Firstname" variant="outlined" name="firstname" onChange={handleChange} />
                    </Grid>
                    <Grid item xs={6}>
                        <TextField 
                        id="filled-multiline-static"
                        label="Comment"
                        multiline
                        rows={4}
                        defaultValue="Share with your artist "
                        variant="filled" onChange={handleChange}/>
                    </Grid>
                    <Box mt={5} display="flex" justifyContent="center">
                      <Box width="70%">
                          <Button type="submit" variant="contained" color="primary" fullWidth  onClick={handleSubmit}>Add Comment</Button>
                      </Box>
                    </Box>
                </Grid>
  </Box>
  )

}
export default Comment

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

两个问题：

1. 你没有正确使用useState
2. 您没有为状态提供初始值，因此它将默认为undefined

useState 返回一个包含两个元素的元组（数组）：

• 状态成员的当前值
• 状态成员的 setter 函数

您的代码：

const [SetPlayingCurrentSong] = useState()
const [playingCurrentSong] = useState()

...只使用第一个。您当前的代码正在创建和获取 两个 状态成员的当前状态，而不是一个。它应该是一个使用返回元组中的两个元素的 useState 调用：

const [playingCurrentSong, SetPlayingCurrentSong] = useState()

playingCurrentSong 将获取状态成员的当前值，SetPlayingCurrentSong 将获取该状态成员的设置器。

如果您想要一个不同于undefined 的初始值，请将该值传递给useState：

const [playingCurrentSong, SetPlayingCurrentSong] = useState(theInitialValue)
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^

---

旁注：尽管您可以在自己的代码中做任何您喜欢的事情，但 JavaScript 中压倒性的普遍约定是只有 cosntructor 函数最初是有上限的。 SetPlayingCurrentSong 应该是 setPlayingCurrentSong（小写首字母“s”）。