反应钩子更改 state object 值

Question

Let's say I have a state variable like:

const [params,setParams] = useState({name:'bill' , surname:'mysurname'});

I want to create a function that gets a string as an input. If the string is a value of one of my object's keys then set the object key value to "".

Example

  input = "bill" 
   if "bill" is a value of a key in my object then set the corresponding key's value to "" 
   I have input= " bill" and name:"bill" so set name:""

I want to do this using setParams of course. I would appreciate your help.

Answer 1

If you're changing all of the properties, you can use setParams in the simple way:

setParams({name: "New name", surname: "New surname"});

If you're only updating some of the properties, the usual way is using spread syntax with setParams , like this:

setParams(params => ({
    ...params,             // Reuse the previous properties
    name: "New name here", // Overwrite the new ones
}));

Note using the callback form, because you're reusing part of the state item, so you want to ensure you're not using stale state because another state update is pending.

---

In an edit you've said:

input = "bill"

if "bill" is a value of a key in my object then set the corresponding key's value to ""

I have input= " bill" and name:"bill" so set name:""

Matching any property seems unusual, but you just put a condition in the callback:

setParams(params => {
    for (const name in params) {
        if (params[name] === input) {
            // It's a match, clear it
            params = {
                ...params,
                [name]: "",
            };
            break;
        }
    }
    return params;
});

That replaces just the first match. To replace all matches:

setParams(params => {
    let newParams;
    for (const name in params) {
        if (params[name] === input) {
            // It's a match, copy the params if we haven't already
            newParams = newParams || {...params};
            // Clear the property
            newParams[name] = "";
        }
    }
    return newParams;
});

If input doesn't match anything, returning the same object from the callback won't result in a re-render, since React will see nothing changed.

Answer 2

The following function will search the values of the given obj . If it finds one matching exactly the given searchValue , it will return another object having that value set to the empty string. If many values match, it replaces only the first. If none matches, it returns the same object. The code assumes fairly modern Javascript features are available.

function t(obj, searchValue) {
  const foundKey = Object.keys(obj).find(key => obj[key] === searchValue);
  if (foundKey) {
    return {
      ...obj,
      [foundKey]: ''
    };
  }
  return obj;
}

Answer 3

 const MyComponent = (props) => { const {} = props; const [params,setParams] = useState({name:'bill', surname:'mysurname'}); const myFunction = (input) => { if(input === params.name){ setParams({...params, name:""}); } } if(condition){ myFunction(someinput) } return <Text>name is {params.name}</Text>; }

Answer 4

You could write it like this:

  const clearParam = (key) => {
    if (Object.keys(params).includes(key)) {
      setParams((states) => ({ ...states, [key]: '' }));
    }
  };