Блог

Моя проблема в том, что когда я отправляю комментарий и состояние обновляется, чат не обновляется должным образом. Вот скриншот того, как это выглядит до и после комментариев. Я не совсем уверен, почему появляются точки, так как, насколько я понимаю, он должен обновляться с комментариями, и в базе данных нет пустых комментариев.

Правка: Только что добавили возврат в чат!

Вот мой код для компонента чата:

 const Chat = () => {
const {loggedIn, setLoggedIn} = useContext(LoginContext) 
const {loginUsername, setLoginUsername} = 
useContext(UsernameContext)
const {tickerValue, setTickerValue} = useContext(TickerValue)
console.log('LOGIN USERNAME:'   loginUsername)
const history = useHistory()
///const value = history.location.state
const searchValue = tickerValue.toUpperCase()
const classes = styles()
const [comments, setComments] = useState([])
const commentSection = []

useEffect(() => {
    if (messageDiv) {
        messageDiv.scrollIntoView(false)
    }
    if (searchValue.length > 0) {
        console.log('SEARCHVALUE '   searchValue)
        console.log('checking comments')
        Axios.get('https://stockliner.herokuapp.com/comment_sections/'   searchValue)
        .then((res) => {
            const data = res.data
            //console.log(data)
            commentSection.push(data)
           
            setComments(data)
        })
    }
},[])


const postComment = () => {
    const content = document.getElementById('commentPost').value
    console.log(content)
    if (loginUsername.length > 0) {
        Axios.post("https://stockliner.herokuapp.com/add_comment", {
            stock_name: searchValue,
            username: loginUsername,
            content:  content
        })
        .then((res) => {
            Axios.get('https://stockliner.herokuapp.com/comment_sections/'   searchValue)
            .then((data) => {
                const comm = res.data
                setComments(comm)
                console.log(comments)
                ///window.location.reload()
            })
            console.log(res)
        })
    } else {
        alert('YOU ARE NOT LOGGED IN')
    }
}
return(
    <div>
        <Card elevation={6} className={classes.commentCard}>
            <CardHeader align="left" title={searchValue   "'s Comments"}/>
            <Divider className={classes.titleDiv}/>
            <div className={classes.textPanel} id="messageDiv">
                {comments ? 
                    Object.keys(comments).map((key) => {
                        return(
                            <div className={classes.row}>
                                <Paper variant="outlined" className={classes.paperDiv}>
                                    <Typography className={classes.username}variant="body">{comments[key].username}: </Typography>
                                    <Typography className={classes.content}variant="body">{comments[key].content}</Typography>
                                </Paper>
                            </div>
                        )
                    })
                    : <p>no comments</p>
                }
            </div>
            <Divider className={classes.postDiv}/>
                {loggedIn? 
                    <div className={classes.titleDiv}>
                        <TextField variant="outlined" 
                        label="Comment" size="small" 
                        id="commentPost"/>
                        <Button variant="outlined" className= 
                   {classes.button} onClick= 
                    {postComment}>Post</Button>
                    </div>
                    :
                    <div className={classes.postDiv}>
                        <TextField variant="outlined" disabled 
                        label="Login required" size="small"/>
                        <Button variant="outlined" className= 
                     {classes.button} disabled>Post</Button>
                    </div>
                }
            </Card>
    </div>
)


}

export default Chat
 

в крючке useEffect есть список переменных, за изменением состояния которых вы следуете, и ваш список пуст, попробуйте добавить туда переменную

Я понял! Оказывается, на втором .затем, после функции PostComment, я обновлял свое состояние с помощью setcomm(res.data), где оно должно было быть setComment(data.data), потому что «res» был ответом первого .затем, а «данные» были для второго. Глупая ошибка, но мне потребовалось два дня, чтобы ее исправить!