如何在 React 中检查 object 数组是否存在于 state 中？

Question

I'm building a dynamic form using React JS. in one of my form i've created an input form of 10. to get clean code i've created an object and map through it for the form. code is below.

{homeAmeneties.map((home) => {
    <div className="h-8 flex justify-end  rounded-md pr-10">
                    <input
                      type="number"
                      onInput={(event) =>
                        (event.target.value = event.target.value.slice(
                          0,
                          event.target.maxLength
                        ))
                      }
                      maxLength="3"
                      onChange={(e) => updateVal(e, home.name)}
                      className="border-[1px] w-1/2  border-black rounded-md h-full focus:outline-none px-2"
                    />
                  </div>
})}

then afterwards i've created a useState([]) and used a conditional to check if the field exists, so that i can only update the value.

const [amen, setAmen] = useState([]);
const updateVal = (e, type) => {
amen.some((item) => {
        if (item.name === type) {
          setAmen({ name: type, val: e.target.value });
        } else {
          setAmen({ name: type, val: e.target.value });
        }
      });
}

when i run this it throws an error. amen.some is not a function error. what i want to achieve is, initially the state is empty. but when one field value changes it add it to the array as { name: type, val: e.target.value } . so before it's added we check if the type already exists. if so then we change the value of that exact array of object. but if the type doesn't exist it create an new object. How can i do that?

Answer 1

It looks like the error is being thrown because amen is an array, but you're trying to use the.some() method on it, which is a method of the Array prototype, but it's not a function. .some() returns a boolean and not an Array, so you can't chain other Array methods to it.

To achieve what you want, you can use the.findIndex() method instead. This method returns the index of the first element in the array that satisfies the provided testing function, or -1 if none is found.

Here's an example of how you can update the state using the.findIndex() method:

      const updateVal = (e, type) => {
      const index = amen.findIndex((item) => item.name === type);
    
      if (index !== -1) {
        const newAmen = [...amen];
        newAmen[index] = { name: type, val: e.target.value };
        setAmen(newAmen);
      } else {
        setAmen([...amen, { name: type, val: e.target.value }]);
      }
    };

This code first finds the index of the object in the amen array that has the matching name property to the type passed in. If the index is not -1, it means that the object already exists in the array, so it creates a new array (newAmen) that is a copy of the current state array, updates the value of the object at the index, and sets the new array as the new state. If the index is -1, it means that the object doesn't exist in the array, so it creates a new array that includes the new object, and sets that as the new state.

Also, in your code, you're trying to set state with object and that's not how state works. In your case, you're trying to set state with an object, but it's expecting an array, that's why it's throwing an error.

You should use setAmen(prevAmen => [...prevAmen, { name: type, val: e.target.value }]);

      const updateVal = (e, type) => {
      const index = amen.findIndex((item) => item.name === type);

      if (index !== -1) {
        setAmen((prevAmen) => {
          prevAmen[index] = { name: type, val: e.target.value };
          return [...prevAmen];
        });

      } else {
        setAmen((prevAmen) => [...prevAmen, { name: type, val: e.target.value }]);

      }
    };

This way it should work as expected.

Answer 2

I have 3 things to point out:

• You said you created an object and map through it to render the input fields. Actually, you can only map over arrays in JavaScript .
• In your updateVal method call, you are setting the react state to an object instead of an array .
• I wouldn't recommend using Array.some () to update the state. Instead, I would use Array.findIndex () .

Solution

const updateVal = (e, type) => {
  const updatedAmen = [ ...amen ]; // create a new array to avoid mutating the state directly

  // check if an input already exists with the said type & get the index position
  const exisitingAmenIdx = updatedAmen.findIndex((a) => a.name === type);

  if (exisitingAmenIdx >= 0) {
    updatedAmen[exisitingAmenIdx].val = e.target.value;
  } else {
    updatedAmen.push({
      name: type,
      val: e.target.value
    })

    // finally update the state
    setAmen(updatedAmen)
  }
};

Answer 3

It's because you're setting the state value of amen to be the object you're aiming to append to the array:

  setAmen({ name: type, val: e.target.value });

  // amen = { name: type, val: e.target.value }

Since it changes from being an Array , Array.some() is not going to be defined. One way you can go about this is:

  setAmen([{ name: type, val: e.target.value }, ...amen]);

Create a new Array so react will update the state. Add the new element, and then use the spread operator ...amen to extract the other elements.