首页 > 解决方案 > 如何获取一个对象的值并将它们放入另一个对象

问题描述

嘿,伙计们,我遇到了以下挫折,我正在尝试在已经填充另一个值的对象的空值上写入,以便以后可以使用它们,我已经定义了对象,并且在收到后尝试用新值重新分配值它们来自 API 调用,问题是我收到的对象与来自 API 调用的对象相同,我不需要那个,我需要与我创建的相同的结构,才能发生这种情况我正在使用 useState。你能指出我正确的方向吗?那是我的代码,之后我总是得到结果

API调用前deliveryAddressInput的初始状态

const [deliveryAddressInput, setDeliveryAddressInput] = useState<NewAddressDetails>({});

调用 API 后的结果是 setDeliveryAddressInput(adress):

BuildingName: "18A"
BuildingNumber: ""
City: "Houghton Le Spring"
Line1: "18A Nesham Place"
Line2: ""
Line3: ""
PostalCode: "DH5 8AG"

顶部映射对象的初始状态:

const [newAddress, setNewAddress] = useState<{}>({
    firstName: firstNameInput,
    lastName: lastNameInput,
    houseNo: deliveryAddressInput.BuildingNumber,
    houseName: deliveryAddressInput.BuildingName,
    street: deliveryAddressInput.Line1,
    addressLine2: deliveryAddressInput.Line2,
    town: deliveryAddressInput.City,
    postCode: deliveryAddressInput.PostalCode,
  });

useState 函数:

useEffect(() => {
    setTimeout(() => {
      setNewAddress(deliveryAddressInput);
    });
  }, [deliveryAddressInput]);

最终结果与 API 调用相同:

BuildingName: "18A"
    BuildingNumber: ""
    City: "Houghton Le Spring"
    Line1: "18A Nesham Place"
    Line2: ""
    Line3: ""
    PostalCode: "DH5 8AG"

我正在尝试接收将 API 调用的值映射到新对象键的以下内容:

        firstName: "Jane",
        lastName: "Smith",
        houseNo: "",
        houseName: "18A",
        street: 18A Nesham Place,
        addressLine2: "",
        town: "Houghton Le Spring",
        postCode: "DH5 8AG",

标签: javascriptreactjstypescriptreact-typescript

解决方案


我想您应该将一个对象转换为另一个对象:

    const convertDeliveryInputIntoAddress = (
      deliveryAddressInput, firstName, lastName
      ) => {
        const {BuildingName, BuildingNumber, City, Line1, PostalCode} = deliveryAddressInput;
        const firstLineSplitted = Line1.split(' ');
        const houseName = firstLineSplitted[0];
        const street = firstLineSplitted.slice(1).join(' ');
        return {firstName, lastName, houseNo: buildingNumber, houseName, street, town: City, postCode: PostalCode};
      }

    ...
    setNewAddress(convertDeliveryInputIntoAddress(deliveryAddressInput, firstName, lastName));

推荐阅读