如果 object 已经在 state 中，则不要添加新条目

Question

Hello my goal is simple yet i find it hard to achieve:

I have the following function which is called everytime an user changes one of the fields in my form:

const handleChange = (e) => {
    const { value , name , id } = e.target; 
    setFieldValues(prev => ([...prev, {value : value , field: name , project : id}]))   
}

And the form:

                <div className='simplicate-fields'> 
                    <span>KPI's</span>   
                    <form onSubmit={handleSubmit}>
                        <textarea defaultValue = {project.fieldKpi.value ? project.fieldKpi.value : null}  name={project.fieldKpi.id} id={project.projectId} onChange = {handleChange}></textarea>
                        <textarea defaultValue = {project.fieldContract ? project.fieldContract.value : null}  name={project.fieldContract.id} id={project.projectId} onChange = {handleChange}></textarea>
                        <input type="submit" value="Opslaan"/>
                    </form>   
                </div>

Everytime i change the input value a new object gets added to the array. I dont want this,if an object with the the field and project property already exists i simply want to update the value property instead of adding a whole new entry. I find it hard because i cannot mutate the state directly.

An example:

the initial state is just an array [];

if i make a change to my form the state will look like this:

[{field: 'job' , project : 123 , value : 'e'}]

if i make another change to the same field with the same properties except value this happens:

[{field: 'job' , project : 123 , value : 'e'} , {field: 'job' , project : 123 , value : 'en'}]

What i want is if the project and field are the same just do this:

[{field: 'job' , project : 123 , value : 'en'}]

and if i'd make another change:

[{field: 'job' , project : 123 , value : 'ent'}]

instead of creating new objects on every keyword i type

Answer 1

Maybe you should be using an object instead of an array then?

Then your initial state can be {} and when you change something add its value to the already set object field. For example the setFieldValues line would look something like this then assuming the name is unique:

setFieldValues(prev => ({...prev, name: {value : value , field: name , project : id}}))

If you need the state to be iterable you could also consider using a Map

Answer 2

Try this:

const handleChange = (e) => {
    const { value, name, id } = e.target;
    setFieldValues(prev => {
        const existingIndex = prev.findIndex(el => (el.field === name) && (el.project === id));
        const newFields = [...prev];
        if (existingIndex >= 0) {
            newFields[existingIndex] = { ...newFields[existingIndex], value };
            return newFields;
        }
        newFields.push({ value: value, field: name, project: id });
        return newFields;
    })
}

Answer 3

const handleChange = (e) => {
    const { value , name , id } = e.target; 
    let projects = fieldValues.map(val => val.project);
    if (projects.includes(id) {
         let newFieldValues = [...fieldValues];
         newFieldValues[projects.indexOf(id)] = { value, field: name, project: id }
         setFieldValues(newFieldValues)
         } else {
            setFieldValues(prev => ([...prev, {value, field: name , project : id}]))
  }
}

Answer 4

try something like this:

class inputForm extends React.Component{
constructor(props){
    super(props);
    this.state = { input1: "", input2: "", input3: false };
}

const changeHandler = (name, value) => {
    this.setState({[name]: value});
}

input fields example:

<Form.Control type="text" name="input1" value={this.state.input1} onChange={(ev)=>this.changeHandler(ev.target.name, ev.target.value)} />
<Form.Control type="text" name="input2" value={this.state.input2} onChange={(ev)=>this.changeHandler(ev.target.name, ev.target.value)} />
<Form.Check name="input3" checked={this.state.input3} onChange={(ev)=>this.changeHandler(ev.target.name, ev.target.checked)} />

I used react-bootstrap components for input fields. Of course the input3 is a checkbox.

Oh I forgot this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

I used the bracket notation to access the proper state in changeHandler callback

Answer 5

Try to override object you already set by creating new one each time, so it will override fields that aren't set yet with new values

setFieldValues(prev =>([ 
  Object.assign(prev, {value , field: name , project: id})
]))

If you don't have to keep fields in an array, just do

setFieldValues(prev => ({...prev, {value, field: name, project: id}})