React Component не обновляет Django REST

все!

Я изучаю React самостоятельно, и я застрял здесь, где я делаю REST API для чата APP, когда я размещаю новое сообщение, компонент не обновляется сам по себе, я должен обновить страницу.

Мне удалось обновить его, поместив idmessage и vmessage в массив useEffect, но он продолжал бить API, и я уверен, что этого не должно было произойти.

Здесь может быть много неправильного кода и много разных способов сделать проект лучше, так что извините, если он плохо написан.

P.S: Все издевается над первым и вторым контактом

Моя страница сообщений:

 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 Component:

    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)

Вернуться на верх