Função está com problemas de performance, estado não atualiza

Programação
, ,
#1

Olá, estou com problemas numa função de onChange do meu select.

Tenho esse estado e função que é chamada no onChange:

  const data = [
  {
    position: 1,
    productId: ''
  },
  {
    position: 2,
    productId: ''
  },
  {
    position: 3,
    productId: ''
  },
  {
    position: 4,
    productId: ''
  },
  {
    position: 5,
    productId: ''
  }
]
  const [dataConfig, setDataConfig] = useState(data)

   const onChangeDropdown = (e, position, products) => {
      const key = position - 1
      const data = dataConfig
  
      const productsFilter = products.filter(
        (fill) => fill?.id === e?.target?.value
      )
  
      const media = data[key]?.media
      if (media) {
        data[key].media = productsFilter[0]?.media || ''
      }
  
      data[key].productId = e?.target?.value
  
      setDataConfig(data)
    }

Se eu der um console.log(data) ele trás o que espero que é trocar o id de um item do array de acordo o o index que foi passado, porém quando eu clico no botão de enviar os dados, eu sempre tenho o estado com o array de Data sem o productId preenchido.

Acredito que seja algo dessa função minha, se alguém tiver uma outra ideia de como eu possa refatorar ela para fazer isso de outra maneira.

#2

Faltou colocar o <select/> com todas as informações, mas, de cara eu já sei, você tem que entender que o estado de componente em reactjs é imutável (não muda), para fazer o certo tem que copiar o objeto e passar o novo valor para atualizar os dados do <select/>

1 curtida
#3

Descobri o motivo, além desse que falou, eu estou usando um Hook em dois componentes separados aí quando atualizo um, ele não atualizava o outro.

Joguei esse hook como contexto global e agora funcionou!

Muito obrigadaaa <3

#4

se ainda deve está fazendo errado, não é por causa do Hook