反應組件不重繪DjangoREST

每個人 ！

我正在自己學習 React，我被困在這里我正在為聊天應用程式做一個 REST API，當我發布一條新訊息時，組件不會自行重繪 ，我必須重繪 頁面。

我設法重繪 它，將 idmessage 和 vmessage 放在 useEffect 陣列中，但它一直在訪問 API，我很確定這不應該發生。

這里可能有很多錯誤的代碼和很多不同的方法來做一個更好的專案，所以如果寫得不好，我很抱歉。

PS：第一次和第二次接觸的一切都是嘲笑的

我的留言頁：

 const MessagesPage = () => {

  let [idmessage, setIdmessage] = useState([])
  let [vmessage, setVmessage] = useState([])

  useEffect(() => {
    getIdMessage()
    getVMessage()    
}, [])

    let url = 'http://127.0.0.1:8000'

    let getIdMessage = async () => {
        let response = await fetch(`${url}/api/messages/1/2/`)
        let data = await response.json()
        setIdmessage(data)
    }

    let getIdName = (idmessage) => {
        return idmessage.map((m) => (
            m.contact.name
        ))
    }

    let getVName = (vmessage) => {
        return vmessage.map((m) => (
            m.contact.name
        ))
    }

    let getVMessage = async () => {
        let response = await fetch(`${url}/api/messages/2/1/`)
        let data = await response.json()
        setVmessage(data)
    }

    const messages = idmessage.concat(vmessage).sort((a,b) => { 
        return a.time.localeCompare(b.time);
    }) // This is the way I found to make it like a real chat and not two different groups in a chat


  return (
    <>
    <MessageHeader/>
        <div className="card bg-dark card-body messages">
            {messages.map((m, index) => (
                m.contact.name === getIdName(idmessage)[0] ?
                <MessageDetail messages={m} key={index} c={1}/>  
                : m.contact.name === getVName(vmessage)[0] ? 
                <MessageDetail messages={m} key={index} c={2}/> 
                : null
            ))
            }
        <SendMessage/>
        </div>
    </>
  )
}

export default MessagesPage

然后是我的 SendMessage 組件：

    const SendMessage = () => {

    let [text, setText] = useState('')


    let url = 'http://127.0.0.1:8000'

    const handleChange = (e) =>{
        setText(e.target.value)
    }
  
    const handleSubmit = (e) => {
      e.preventDefault()
      sendText()
      setText('')
  }
  
  
  let sendText = async () => {
      fetch(`${url}/api/messages/1/2/`, {
          method: "POST",
          headers: {
              'Content-Type': 'application/json'
          },
          body: JSON.stringify({
              "text": (text),
              "contact": 1,
              "other_contact": 2,
              "state": false
        })
      })
  }

  return (
    <div className="w-100 card-footer border bg-light textWrite">       
        <form className='m-0 p-0' onSubmit={handleSubmit} method="POST" autoComplete='off'>
            <div className="row m-0 p-0">
                <div className="col-11 m-0 p-1">
                    <input id="text" onChange={handleChange} className="mw-100 border rounded form-control" type="text" name="text" title="Send a Message" placeholder="Send a Message..." value={text} required/>
                </div>
                <div className="col-1 m-0 p-1">     
                    <button id='sendText' className="btn btn-outline-secondary rounded border w-100" type='submit'><BsChatDots/></button>
                </div>
            </div>
        </form>
    </div>
  )
}
export default SendMessage

序列化器：

@api_view(['GET', 'POST'])
def detailMessages(request, pk, o_pk):
    message = Message.objects.filter(contact=pk, other_contact=o_pk)
    serializer = MessageSerial(message, many=True)

    if request.method == 'GET':
        return Response(serializer.data)

    if request.method == 'POST':
        data = request.data
        contact = Contact.objects.get(id=data['contact'])
        other_contact = Contact.objects.get(id=data['other_contact'])
        message = Message.objects.create(
            contact=contact,
            other_contact=other_contact,
            text=data['text'],
            state=data['state']
        )
        serializer = MessageSerial(message, many=False)
        return Response(serializer.data)

uj5u.com熱心網友回復：

如果您想在不每次都訪問資料庫的情況下制作實時訊息系統，您應該簡單地閱讀WebSocket，它正在打開多個設備之間的池連接以發送和接收資料，而無需在發送后關閉連接，例如 http 請求和此資料將始終通過拋出此連接（通道）而無需重新加載或資料庫命中，您應該閱讀更多有關它的資訊以更好地理解。

如果你想在你的專案中使用它，你可以搜索：react websocket and Django Channels

祝你好運

標籤：Python反应djangodjango-rest-framework

上一篇：如何使表單欄位不屬于提交的表單

下一篇：為什么我的函式get_absolute_url將我的域合并到我的網站名稱中？