React.js中单个Answer组件添加Comment模块的全局触发异常问题

问题根源：你用了一个全局布尔状态button控制所有评论输入框的显示/隐藏，所有Answer组件共享这个状态，导致点击任意按钮都会触发所有输入框同时显示。

修改步骤： #

1. 替换状态变量：把单个布尔值改成存储当前激活的Answer ID，初始值设为null

// 原代码
// const [button, setButton] = useState(false);

// 修改后
const [activeCommentId, setActiveCommentId] = useState(null);

2. 更新点击事件处理函数：点击按钮时，切换当前激活的Answer ID（如果已经是当前ID则隐藏，否则显示）

// 原代码
// const handleComment = (e) => {
//     setButton(!button)
//     alert(e.target.id)
// }

// 修改后
const handleComment = (ansId) => {
    // 切换显示/隐藏：如果当前激活的是这个ID，就取消；否则设置为这个ID
    setActiveCommentId(prevId => prevId === ansId ? null : ansId);
}

3. 修改按钮的点击绑定：直接传递当前Answer的_id，不用再通过事件对象获取

// 原代码
// <button id = {ans._id} type='button' onClick = { (e) => handleComment(e) }> Add Comment </button>

// 修改后
<button type='button' onClick={() => handleComment(ans._id)}> Add Comment </button>

4. 更新输入框的显示判断条件：只当当前Answer的ID和激活ID一致时，才显示输入框

// 原代码
// {
//     button && 
//     (
//         <div id = {ans._id}>
//             <textarea rows='5' cols='30'> </textarea> <br />
//             <button type='button'> Post </button>
//         </div>
//     )
// }

// 修改后
{
    activeCommentId === ans._id && 
    (
        <div id={ans._id}>
            <textarea rows='5' cols='30'> </textarea> <br />
            <button type='button'> Post </button>
        </div>
    )
}

修改后的完整代码： #

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import moment from 'moment'
import Avatar from '../../components/Avatar/Avatar'
import { useSelector, useDispatch} from 'react-redux'
import { useParams } from 'react-router-dom'
import { deleteAnswer } from '../../actions/question'

const DisplayAnswer = ( { question, handleShare }  ) => {

    const User = useSelector((state) => (state.currentUserReducer))
    const dispatch = useDispatch()
    const { id } = useParams()
    
    // 替换状态为存储当前激活的answer ID
    const [activeCommentId, setActiveCommentId] = useState(null);

    const handleDelete = (answerId, noOfAnswers) => {
        dispatch(deleteAnswer(id, answerId, noOfAnswers-1))
    }

    // 更新点击处理逻辑
    const handleComment = (ansId) => {
        setActiveCommentId(prevId => prevId === ansId ? null : ansId);
    }

    return (
        <div>
            {   
                question.answer.map( (ans) => (
                    <div className="display-ans" key={ans._id}>
                        <p>{ans.answerBody}</p>
                        <div className="question-actions-user">
                            <div>
                                <button type="button" onClick={handleShare}>Share</button>
                                {          
                                    User?.result?._id === ans?.userId && (
                                        <button type='button' onClick={ () => handleDelete(ans._id, question.noOfAnswers) }>Delete</button>
                                    )
                                }

                                <div>
                                        
                                </div>

                                {/* 修改按钮点击绑定 */}
                                <button type='button' onClick={() => handleComment(ans._id)}> Add Comment </button>

                                {/* 修改显示判断条件 */}
                                {
                                    activeCommentId === ans._id && 
                                    (
                                        <div id={ans._id}>
                                            <textarea rows='5' cols='30'> </textarea> <br />
                                            <button type='button'> Post </button>
                                        </div>
                                    )
                                }
                                
                            </div>

                            <div>
                                <p>answered { moment(ans.answeredOn).fromNow()}</p>
                                <Link to={`/Users/${ans.userId}`} className='user-link' style={{color:'#0086d8'}}>
                                    <Avatar backgroundColor="lightgreen" px='8px' py='5px' borderRadius='4px'>{ans.userAnswered.charAt(0).toUpperCase()}</Avatar>
                                    <div>
                                        {ans.userAnswered}
                                    </div>
                                </Link>
                            </div>

                        </div>

                   </div> 

                ))
            }
        </div>


    )
}

export default DisplayAnswer

修改后，每个Answer的评论输入框会独立受控，点击哪个按钮就只显示对应Answer下方的输入框，再次点击会隐藏。

内容的提问来源于stack exchange，提问作者Vinay Jain