javascript - typescript - 使用日期时无法更新对象数组

Question

我有一个 typescript 函数，它接收一个“queryParameter”，然后从组件内的状态钩子(Hook)循环遍历现有的一组 queryParameters。如果它找到匹配的参数名称，我希望它将 queryParameters 对象更新为 const 'newQueryParams'。
请注意，该问题仅发生在“日期”查询参数中。所有代码示例都适用于其他类型(“getLatest”和“fundCode”)。这也不是日期对象相等的问题
功能(仅必要部分):

  const handleQueryParameterChange = (queryParameter: DataProductQueryParameter) => {

    console.log("existing parameters from state hook: ", queryParameters)
    console.log("incoming parameter to function: ", queryParameter)

    const newQueryParams = queryParameters.map((param, i) => {
      console.log("loop: " + i);
      if(queryParameter.name === param.name) {
        console.log("match");
        param.suggestedValue = queryParameter.suggestedValue;
        }
      return param;
  });

  console.log("new query params: ", newQueryParams);

我已经记录了各种位以显示发生了什么:

如您所见，传入参数尝试将日期更改为 21 日，但失败了，尽管循环中有匹配项。
我也尝试过使用深拷贝:

const deepCopyFunction = (inObject: any) => {
  let outObject: any, value, key

  if (typeof inObject !== "object" || inObject === null) {
    return inObject // Return the value if inObject is not an object
  }

  // Create an array or object to hold the values
  outObject = Array.isArray(inObject) ? [] : {}

  for (key in inObject) {
    value = inObject[key]

    // Recursively (deep) copy for nested objects, including arrays
    outObject[key] = deepCopyFunction(value)
  }

  return outObject
}

    const handleQueryParameterChange = (
    queryParameter: DataProductQueryParameter
  ) => {
    
    const queryParametersCopy = deepCopyFunction(queryParameters);
    const deepCopyQueryParam = {...queryParameter};

    console.log("existing parameters copy: ", queryParametersCopy)
    console.log("incoming new parameter: ", queryParameter)

  
    console.log("incoming parameter deep copy: ", deepCopyQueryParam);

    const newQueryParams = queryParametersCopy.map((param, i) => {
      console.log("loop: " + i);
    if(deepCopyQueryParam.name === param.name) {
      console.log("match");
      param.suggestedValue = deepCopyQueryParam.suggestedValue;
    }
     return param;
  });

  console.log("new query params: ", newQueryParams);

产生了相同的结果:

我还尝试在获得匹配项时切换整个对象，而不仅仅是编辑属性:

const handleQueryParameterChange = (queryParameter: DataProductQueryParameter) => {
    
    console.log("existing parameters: ", queryParameters)
    console.log("incoming new parameter: ", queryParameter)

    const newQueryParams = queryParameters.map(param => {
      return queryParameter.name === param.name ? queryParameter : param;    
  });

  console.log("new query params: ", newQueryParams);

...这也不起作用/下面的屏幕截图概述了输出，但还要注意“传入新参数”中标题和扩展对象之间的区别。我已经看过几次了，虽然堆栈溢出告诉我它是控制台的异步性质，但我无法弄清楚为什么它会在代码中发生。

再次请注意，该问题仅发生在“日期”查询参数中。所有代码示例都适用于其他类型(“getLatest”和“fundCode”)
更新
我已经实现了建议的改进之一，但我仍然没有得到正确的输出。
下面是更多代码，包括一个状态钩子(Hook)和一个效果钩子(Hook)，以及新的实现:

    const [queryParameters, setQueryParameters] = useState<DataProductQueryParameter[]>(dataProductQueryParameters ?? []);

    useEffect(() => {
    console.log("effect called: ", queryParameters)
  }, [queryParameters])

  const handleQueryParameterChange = (queryParameter: DataProductQueryParameter) => {

  if(queryParameter.name === "getLatest") {
    setDatePickerDisabled(!datePickerDisabled);
  } 

  const matchIndex = queryParameters.findIndex(param => queryParameter.name === param.name);
      const queryParametersCopy = JSON.parse(JSON.stringify(queryParameters));  

  if (matchIndex !== -1) {
    const suggestedValue = queryParameter.suggestedValue;
    queryParametersCopy[matchIndex] = { ...queryParametersCopy[matchIndex], suggestedValue}
  }

    console.log("new query params: ", queryParametersCopy);

    setQueryParameters(queryParametersCopy);
  };

状态 Hook 在组件加载时成功设置。当我调用 handleChange 函数时，我的调试器显示它成功更新了新数组 (newQueryParams)。
当调用 setQueryParameters 来更新状态 Hook 时，就会出现问题。当调用 useEffect Hook 时，它似乎触发得很好。但是我的调试器和控制台都显示更新数组上的建议值字段没有得到更新。
再一次 - 这对其他字段非常有效 - getLatest 和fundCode，所以逻辑是合理的，并且钩子(Hook)正在触发以设置新值，但日期根本不会更新。
谢谢

Answer 1

您最初的代码运行良好。如果您运行以下代码段，您将看到最终的 new query params日志显示suggestedValue属性已成功更新:

const queryParameters = [{
    name: 'test',
    suggestedValue: '2021-03-23'
  },
  {
    name: 'foobar',
    suggestedValue: '2022-03-23'
  }
]

const handleQueryParameterChange = (queryParameter) => {

  console.log("existing parameters from state hook: ", queryParameters)
  console.log("incoming parameter to function: ", queryParameter)

  const newQueryParams = queryParameters.map((param, i) => {
    console.log("loop: " + i);
    if (queryParameter.name === param.name) {
      console.log("match");
      param.suggestedValue = queryParameter.suggestedValue;
    }
    return param;
  });

  console.log("new query params: ", newQueryParams);

}

handleQueryParameterChange({
  name: 'test',
  suggestedValue: '2021-03-21'
})

但是，您可以改进此代码以避免解析 全部 .map() 的数组元素.您最好使用 .findIndex()方法。如果您运行以下代码段，您将看到它只会记录 loop: 0 :

const queryParameters = [{
    name: 'test',
    suggestedValue: '2021-03-23'
  },
  {
    name: 'foobar',
    suggestedValue: '2022-03-23'
  }
]

const handleQueryParameterChange = (queryParameter) => {

  console.log("existing parameters from state hook: ", queryParameters)
  console.log("incoming parameter to function: ", queryParameter)

  const matchIndex = queryParameters.findIndex((param, i) => {
    console.log("loop: " + i);
    return queryParameter.name === param.name
  })

  if (matchIndex !== -1) {
    const suggestedValue = queryParameter.suggestedValue
    queryParameters[matchIndex] = { ...queryParameters[matchIndex],
      suggestedValue
    }
  }

  console.log("new query params: ", queryParameters);
}

handleQueryParameterChange({
  name: 'test',
  suggestedValue: '2021-03-21'
})