如何实时添加数据并在我的React应用中显示

Question

导出默认函数 AllQuestion() {

  让 [allQuestion, setAllQuestion] = useState([]);
  让 isMounted = true;
  让 [userAnswer, setUserAnswer] = useState("");
  常量导航 = useNavigate();
  const getData = () =>; {
    const userId = sessionStorage.getItem("id");
    Services.getAllQuestions(userId).then((res) => {
      如果（已安装）{
        console.log(res.data);
        // -  -  -  -  -  -  -  -  - -参考 -  -  -  -  -  -  -  -  -  -  - 
        setAllQuestion(res.data);
      }
    });
  };
  useEffect(() => {
    获取数据（）；
    返回() => {
      已安装=假；
    };
  }, []);

  const submitAnswerHandler = (qid) =>; {
    控制台.log(qid);
    控制台.log（用户答案）；
    const uid = sessionStorage.getItem("id");
    const name = sessionStorage.getItem("name");
    const dept = sessionStorage.getItem("部门");
    const 角色 = sessionStorage.getItem("角色");
    常量日期=新日期（）；
    今天常量 =
      日期.getDay() +
      “/”+
      日期.getMonth() +
      “/”+
      日期.getFullYear() +
      “在”+
      日期.getHours() +
      “：”+
      日期.getMinutes();
    常量answerObj = {
      用户 ID：uid，
      用户名：姓名，
      用户部门：部门，
      用户角色：角色，
      ansDate：今天，
      答案：用户答案，
      Question_id: qid,
    };
    // -  -  -  -  -  -  -  -  - 参考 -  -  -  -  -  -  -  -  -  -  -  -  -  - 
    Services.answerQuestion(uid, qid, answerObj).then((res) => {
      成功（res.data）；
      // -  -  -  -  -  -  - -参考 -  -  -  -  -  -  -  -  -  -  -  -  
      导航（'/home'）
      console.log(res.data);
    });
  };

  返回 （
    <>
      <标题/>>
      <左容器>>
      >
      

        {// -  -  -  -  -  -  -  -  -  - -参考 -  -  -  -  -  -  -  -  - }
        <手风琴允许零展开>
          {allQuestion.map((问题) => (
            
              <手风琴>
                <手风琴项目标题>
                  {question.question}
                
                
                  

                    提问者
                  
                  
{question.userName}
;
                  

                    {question.userRole} - {question.userDepartment}
                  
                  
于{question.quesDate}
                  <小时/>>
                  

                    {question.answers.map((answer) => (
                      <手风琴项目面板
                        类名=“accordion__panel-cstm”
                        键={answer.id}
                      >
                        
 {answer.answer}
;

                        

                          回答者
                        
                        
{answer.userName}
;
                        

                          {answer.userRole} - {answer.userDepartment}
                        
                        
于 {answer.ansDate}
                        <小时/>>
                        
                        

                      
                    ))}
                  
                
              
              <手风琴类名称=“”>
                ;
                  
                    回答这个问题
                  
                
                <手风琴项目面板>
                  
;
                    
;
                      

                        {// -  -  -  -  -  -  -  - 参考 -  -  -  -  -  -  -  - -}
                        <文本区域
                          类名=“ans-box”
                          onChange={(e) =>; setUserAnswer(e.target.value)}
                        >
                      
                      

                        <按钮
                          类名=“ans-btn”
                          值={问题.qid}
                          onClick={(e) =>; {
                            e.preventDefault();
                            提交答案处理程序（问题.id）；
                            
                          }}
                        >
                          回答
                        
                      
                    
                  
                
              
            
          ))}
        
      

      <页脚>>
    
  ）；
}

在上面组件的渲染中，我得到了存储在服务器端的所有问题。然后我执行嵌套映射以遍历和显示数据。我还设置了答案并针对特定的 QuestionID 提交。我面临的问题是，当我发布答案时，我必须重新加载相同的组件才能获取更新的 allQuestion 对象数组，或者我必须导航到其他组件然后返回到此组件 ，即使导航到同一组件也不起作用。 我只想实时显示答案，而无需在将 answerObj 发送到服务器之前或之后再次加载组件。

allQuestion对象列表的结构

<前><代码>所有问题=[ { “问题ID”：qid， ...., ...., ...., 答案：[ { “answerId”：帮助， …… }, ] }]

Answer 1

如果要实现实时系统，则可以使用WebSocket协议。
在您的情况下，您只想在没有重新加载组件的情况下显示答案，只需将新问题对象推至allquestion导航。
这样：对不起

setAllQuestion([...allQuestion, { "questionId":qid /* some props */ } ]);

，我的英语不好