1
resposta

Minha nota não atualiza

import React, { useState, useEffect } from "react"
import { Modal, View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView, KeyboardAvoidingView } from "react-native"
import { Picker } from '@react-native-picker/picker'
import { adicionaNota, atualizaNota } from '../servicos/Notas'

export default function NotaEditor({mostraNotas, notaSelecionada, setNotaSelecionada}) {

  useEffect(() => {
    if(notaSelecionada.id){
      preencheModal()
      setNotaParaAtualizar(true)
      setModalVisivel(true)
      return
    }
    setNotaParaAtualizar(false)
  }, [notaSelecionada])

  const [titulo, setTitulo] = useState('')
  const [categoria, setCategoria] = useState("Pessoal")
  const [texto, setTexto] = useState("")
  const [modalVisivel, setModalVisivel] = useState(false)
  const [notaParaAtualizar, setNotaParaAtualizar] = useState(false)

  async function salvaNota(){
    const umaNota = {
      titulo: titulo,
      categoria: categoria,
      texto: texto,
    }
    await adicionaNota(umaNota)
    mostraNotas()
  }

  async function modificaNota(){
    const umaNota = {
      titulo: titulo,
      categoria: categoria,
      texto: texto,
      id: notaSelecionada.id
    }
    await atualizaNota(umaNota)
    mostraNotas()
  }

  function preencheModal(){
    setTitulo(notaSelecionada.titulo)
    setCategoria(notaSelecionada.categoria)
    setTexto(notaSelecionada.texto)
  }

  function limpaModal(){
    setTitulo('')
    setCategoria('Pessoal')
    setTexto('')
    setNotaSelecionada({})
    setModalVisivel(false)
  }

  return(
    <>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisivel}
        onRequestClose={() => {setModalVisivel(false)}}
      >
        <KeyboardAvoidingView
          behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
          style={estilos.centralizaModal}
        >
          <ScrollView showsVerticalScrollIndicator={false}>
            <View style={estilos.modal}>
              <Text style={estilos.modalTitulo}>Criar nota</Text>
              <Text style={estilos.modalSubTitulo}>Título da nota</Text>
              <TextInput
                style={estilos.modalInput}
                onChangeText={novoTitulo => setTitulo(novoTitulo)}
                placeholder="Digite um título"
                value={titulo}/>
              <Text style={estilos.modalSubTitulo}>Categoria</Text>
              <View style={estilos.modalPicker}>
                <Picker
                  selectedValue={categoria}
                  onValueChange={novaCategoria => setCategoria(novaCategoria)}>
                    <Picker.Item label="Pessoal" value="Pessoal"/>
                    <Picker.Item label="Trabalho" value="Trabalho"/>
                    <Picker.Item label="Outros" value="Outros"/>
                </Picker>
              </View>
              <Text style={estilos.modalSubTitulo}>Conteúdo da nota</Text>
              <TextInput
                style={estilos.modalInput}
                multiline={true}
                numberOfLines={3}
                onChangeText={novoTexto => setTexto(novoTexto)}
                placeholder="Digite aqui seu lembrete"
                value={texto}/>
              <View style={estilos.modalBotoes}>
                <TouchableOpacity style={estilos.modalBotaoSalvar} onPress={() => {
                  notaParaAtualizar ? modificaNota() : salvaNota()}}>
                  <Text style={estilos.modalBotaoTexto}>Salvar</Text>
                </TouchableOpacity>
                <TouchableOpacity style={estilos.modalBotaoCancelar} onPress={() => {limpaModal()}}>
                  <Text style={estilos.modalBotaoTexto}>Cancelar</Text>
                </TouchableOpacity>
              </View>
            </View>
          </ScrollView>
        </KeyboardAvoidingView>
      </Modal>
      <TouchableOpacity onPress={() => {setModalVisivel(true)}} style={estilos.adicionarMemo}>
        <Text style={estilos.adicionarMemoTexto}>+</Text>
      </TouchableOpacity>
    </>
  )
}
1 resposta

Olá, Nícolas!

Pelo código que você compartilhou, parece que você está desenvolvendo um editor de notas utilizando React Native. Você mencionou que a sua nota não está atualizando. Vamos analisar o código para tentar identificar o problema.

Ao observar a função modificaNota, que é chamada quando o usuário clica no botão "Salvar" no modal, percebo que você está utilizando a função atualizaNota para atualizar a nota no servidor. No entanto, não vejo onde você está atualizando os estados titulo, categoria e texto com os novos valores fornecidos pelo usuário.

Para resolver esse problema, você precisa adicionar as linhas de código que atualizam esses estados dentro da função modificaNota. Por exemplo:

async function modificaNota(){
  const umaNota = {
    titulo: titulo,
    categoria: categoria,
    texto: texto,
    id: notaSelecionada.id
  }
  await atualizaNota(umaNota)
  mostraNotas()

  // Adicione as linhas abaixo para atualizar os estados
  setTitulo('')
  setCategoria('Pessoal')
  setTexto('')
}

Dessa forma, após atualizar a nota no servidor, os estados titulo, categoria e texto serão resetados para os valores iniciais, permitindo que o usuário crie uma nova nota.

Espero que essa sugestão resolva o problema que você está enfrentando. Se tiver mais alguma dúvida, é só perguntar!

Espero ter ajudado e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software