javascript - How to properly update an array inside a react hook state - Stack Overflow

admin管理员组

文章数量:1302350

i've been trying to update the object inside an array that respresents a react state, the object should be updated when the value of an input is changed, I could find a way myself to update it, but i'm not sure enough that it is the proper way to do it because when i open the react dev tools and go to the ponents tab and click the ponent that i'm working on, the state doesn't update immidiatly when typing in the input, and in order to see the change i have to click on another ponent in the dev tool and then go back to the first ponent and the change is done.

So I'm basically asking if the way i used to update the state is correct and to get some suggestions about better ways to do it so it updates instantly. Thanks

here is the code

the state:

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

the change handling function (the function that updates the state):

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

the inputs:

{
  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>
    );
  });
}

i've been trying to update the object inside an array that respresents a react state, the object should be updated when the value of an input is changed, I could find a way myself to update it, but i'm not sure enough that it is the proper way to do it because when i open the react dev tools and go to the ponents tab and click the ponent that i'm working on, the state doesn't update immidiatly when typing in the input, and in order to see the change i have to click on another ponent in the dev tool and then go back to the first ponent and the change is done.

So I'm basically asking if the way i used to update the state is correct and to get some suggestions about better ways to do it so it updates instantly. Thanks

here is the code

the state:

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

the change handling function (the function that updates the state):

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

the inputs:

{
  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>
    );
  });
}

• javascript
• arrays
• reactjs
• react-hooks
• state

Share Improve this question Follow edited Mar 31, 2020 at 21:38 awran5 4,54622 gold badges1616 silver badges3232 bronze badges asked Mar 31, 2020 at 21:28 Salah Eddine MakdourSalah Eddine Makdour 1,04211 gold badge1414 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

    const [items, setItems] = React.useState({
        name: '',
        quantity: '',
        unit: ''
    });
    const handleChange = prop => event => {
        setItems({ ...items, [prop]: event.target.value });
    };

on your TextFields:

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

Update: if items is an array:

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

on your TextFields:

{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>
))}

I got the issue when state is object. I used redux and mapStateToProps and I can't listen the property in object change cause react can not check deeper. Solution: follow code:

// in reducer file
 case 'SAVE_SERVICE_STATE': {
      return {
        ...state,
        service: {...payload},
        loading: false,
      };
    } 

//listen service state change
  useEffect(() => {
    if (props.serviceState) {
      // do something
    }
  }, [props.serviceState]);

hope can help someone.

本文标签： javascriptHow to properly update an array inside a react hook stateStack Overflow