Как правильно обновить массив в состоянии реагирующего хука - PullRequest
Новая
       4

Как правильно обновить массив в состоянии реагирующего хука

1 голос
/ 01 апреля 2020

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

Поэтому я в основном спрашиваю, Я использовал, чтобы обновить состояние правильно и получить некоторые предложения о лучших способах сделать это, чтобы оно обновлялось мгновенно. Спасибо

вот код

состояние: 

const [items, setItems] = useState([{ name: "", quantity: "", unit: "" }]);

функция обработки изменений (функция, которая обновляет состояние): 

const nameChange = (e, i) => {
  const newItems = items;
  newItems[i].name = e.target.value;
  setItems(newItems);
  console.log(items);
};

входы: 

{
  items.map((item, i) => {
    return (
      <div key={i} className={`mt3 ${classes.root}`}>
        <TextField
          onChange={e => nameChange(e, i)}
          style={{ width: "30%" }}
          id="standard-basic"
          label="Item name"
        />
        <TextField
          style={{ width: "25%" }}
          id="standard-basic"
          label="quantity"
        />
        <TextField
          style={{ width: "10%" }}
          id="standard-basic"
          label="Unit"
        />
      </div>
    );
  });
}

1 Ответ

2 голосов
/ 01 апреля 2020 
    const [items, setItems] = React.useState({
        name: '',
        quantity: '',
        unit: ''
    });
    const handleChange = prop => event => {
        setItems({ ...items, [prop]: event.target.value });
    };

в ваших текстовых полях: 

    <TextField onChange={handleChange('name')}/>
    <TextField onChange={handleChange('quantity')}/>

Обновление : если элементы являются массивом: 

    const updateItem = (prop, event, index) => {
        const old = items[index];
        const updated = { ...old, [prop]: event.target.value }
        const clone = [...items];
        clone[index] = updated;
        setItems(clone);
    }

в ваших текстовых полях: 

{items.map((item, i) => (
    <div key={i}>
        <TextField onChange={e => updateItem('name', e, i)}/>
        <TextField onChange={e => updateItem('quantity', e, i)}/>
        <TextField onChange={e => updateItem('unit', e, i)}/>
    </div>
))}
...