使用来自深度嵌套对象的字符串路径键设置状态值

Question

我正在尝试使用访问对象的键的字符串路径来更改对象中深度嵌套的值。

设置：

const [payload, setPayload] = useState({
    name: "test",
    download: true,
    downloadConfiguration: {
      product: {
        initialDownloadLength: 3,

      }}})

当对象值改变时：

  const handleChange = (prop: any) => (e: React.ChangeEvent<HTMLInputElement>) => {

    if (typeof e.target.value === "number") {
      setPayload({ ...payload, [prop]: parseInt(e.target.value) });
    }

    if (typeof e.target.value === "string") {
      setPayload({ ...payload, [prop]: e.target.value });
    }
  };

当我更改对象最外层的值时，它工作正常并更新值，例如

onChange={handleChange("name")}

但我无法访问嵌套在产品和下载配置中的 initialDownloadLength 键。我试过“downloadConfiguration.product.initalDownloadLength”并使用方括号等，但每次它都会在对象的最顶层创建一个新对象。

Answer 1

您可以在 handleChange 方法中使用此处 dynamically-set-property-of-nested-object 中的解决方案，如下所示：

// set method copied from the above link
function set(obj, path, value) {
    var schema = obj; 
    var pList = path.split('.');
    var len = pList.length;
    for(var i = 0; i < len-1; i++) {
        var elem = pList[i];
        if( !schema[elem] ) schema[elem] = {}
        schema = schema[elem];
    }
    schema[pList[len-1]] = value;
}
...

const handleChange = (prop) => (e) => {
  let value;
  if (typeof e.target.value === "number") {
    value = parseInt(e.target.value);
  }

  if (typeof e.target.value === "string") {
    value = e.target.value;
  }

  setPayload((prevState) => { 
     const newState = {...prevState};
     set(newState, prop, value);
     return newState;
 })
};
....

onChange={handleChange("downloadConfiguration.product.initialDownloadLength")}

使用来自深度嵌套对象的字符串路径键设置状态值

Set state value using string path key from deeply nested object

javascript

object

typescript

reactjs

use-state