Поле ввода не привязано к состоянию

Я пытаюсь привязать ввод к состоянию. При этом я застрял там, где входное значение фиксируется в функции onChange и обновляется до состояния, однако объект JSON ({JSON.stringify(data.MetricsData)}), который находится в пользовательском интерфейсе, не обновляется.

Выходной результат должен JSON.stringify(data.MetricsData) быть обновлен последним значением на входе.

Ниже приведен упрощенный код:

let obj = [];

function Metrics() {
  obj["MetricsData"] = MetricsDataObj()
  const [data, setData] = useState(obj);

  function onChange(event){
    let value = event.target.value;
    data.MetricsData[0].year1 = value;
    setData(() => {
      console.info(data)
      return data;
    });
  }

  return (
    <div>
      <input type = "number" placeholder = "0.00" min = "0.00" step = "0.01" onChange = {(e) => onChange(e)} />
      <br/><br/>
      {JSON.stringify(data.MetricsData)}
    </div>
  );
}

function MetricsDataObj(){
  return [
    { id: 1, name: 'Month 1', year1: '' }
  ];
}

export default Metrics;

Попробуйте передать значение в <input />, чтобы сделать его управляемым, <input value = {data.MetricsData[0]} /> что-то вроде этого

— 16.03.2022 23:03

reactjs

16.03.2022 22:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно сделать копию из state перед обновлением его значения. Кроме того, способ, который вы выбрали для обновления state, неверен. Попробуй это:

import { useState } from "react";

let obj = [];
function Metrics() {
  obj["MetricsData"] = MetricsDataObj()
  const [data, setData] = useState(obj);

  function onChange(event){
    let value = event.target.value;
    const copy = {...data};
    copy.MetricsData[0].year1 = value;
    setData(copy);
  }

  return (
    <div>
      <input type = "number" placeholder = "0.00" min = "0.00" step = "0.01" onChange = {(e) => onChange(e)} />
      <br/><br/>
      {JSON.stringify(data.MetricsData)}
    </div>
  );
}

function MetricsDataObj(){
  return [
    { id: 1, name: 'Month 1', year1: '' }
  ];
}

export default function App() {
  return (
    <Metrics/>
  );
}

Edit smoosh-grass-v8qyhb