Question

假设我有一个状态变量，例如：

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

我想创建一个获取字符串作为输入的函数。如果字符串是我的对象键之一的值，则将对象键值设置为 "" 。

示例

  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:""

我当然想使用 setParams 来做到这一点。感谢您的帮助。

Answer 1

如果您要更改所有属性，则可以以简单的方式使用 setParams：

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

如果您只更新某些属性，通常的方法是使用带有 setParams 的展开语法，如下所示：

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

请注意使用回调表单，因为您正在重用状态项的一部分，因此您要确保不会因为另一个状态更新正在等待而使用陈旧状态。

在您所说的编辑中：

<块引用>

input = "账单"

如果“bill”是我对象中某个键的值，则将相应键的值设置为“”

我输入了 = " bill" 和 name:"bill" 所以设置 name:""

匹配任何属性似乎不寻常，但您只需在回调中放置一个条件：

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

这仅替换了第一场比赛。替换所有匹配项：

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

如果 input 不匹配任何内容，则从回调中返回相同对象不会导致重新渲染，因为 React 不会看到任何变化。

Answer 2

以下函数将搜索给定 obj 的值。如果它找到一个与给定的 searchValue 完全匹配的对象，它将返回 another 对象，该对象将该值设置为空字符串。如果多个值匹配，则仅替换第一个值。如果没有匹配项，则返回相同的对象。该代码假定可以使用相当现代的 Javascript 功能。

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

你可以这样写：

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

反应钩子改变状态对象值

4 个答案: