在扩展运算符中使用点符号会引发语法错误

Question

我正在尝试映射一组看起来像这样的对象：

const infoFields = [
{ placeholder: "41 Richard-Sorge str. 10249", target: address },
{ placeholder: "Berlin", target: city },
{ placeholder: "[phone]", target: phone },
{ placeholder: "[email protected]", target: email }];

-目标来自像这样的解构对象：

  const { address, city, email, phone } = personalInfo;

我的回报是这样的：

<form>
  <div className="mb-3">
    {infoFields.map((field, i) => {
      console.log(field);
      return (
        <input
          key={i}
          placeholder={field.placeholder}
          className="form-control"
          onChange={(e) => {
              setPersonalInfo({ ...personalInfo, field.target: e.target.value  });
          }}
        />
      );
    })}
  </div>
</form>

我认为我应该能够使用“field.target”来指定我试图在映射输入中将“e.target.value”分配给哪个键，但是我遇到了语法错误。

我也尝试过使用方括号表示法，并将其声明为上面自己的变量，即

const newTarget = field.target

但是这些都没有成功

非常感谢任何帮助，谢谢

Answer 1

出现语法错误是因为您不能在扩展运算符中使用点符号来动态分配对象中的键。

使用方括号动态分配密钥。

[field.target]: e.target.value

Answer 2

感谢 Adriano Repetti，与

配合得很好

[field.target]: e.target.value