将状态更新为对象数组

Question

所以我一直在尝试设置变量 domainRecordsInput 的值，因为它们是动态的。有时有一两行数据，有时有六或八行。我需要更新数组中正确对象中的特定字段。

这是我得到的：

  function DomainRecordsTable() {
    const [records, setRecords] = useState(['']);

    const { loading, error, data } = useQuery(GET_DOMAIN_RECORDS, {
      variables: {
        domain: domain,
      },
    });

    useEffect(() => {
      if (data && data.getDomainRecords) {
        setRecords( data.getDomainRecords.host );
      }
    }, [data]);

    const [exeRecords] = useMutation(SET_DOMAIN_RECORDS, {
      variables: {
        domain: domain,
        domainRecordsInput: [{
          hostName: "lol",
          recordType: "lol",
          address: "lol",
          mxPref: "lol",
          ttl: "lol",
        }]
      },
    });

    if (loading) return <LoadingIndicator />;
    if (error) return `Error! ${error.message}`;

    return (
      <>

      <TableComp>
        <Table.Head>
          <Table.Row>
            <Table.Cell>
              <span>type</span>
            </Table.Cell>
            <Table.Cell>
              <span>address</span>
            </Table.Cell>
            <Table.Cell>
              <span>value</span>
            </Table.Cell>
            <Table.Cell>
              <span>priority</span>
            </Table.Cell>
            <Table.Cell>
              <span>ttl</span>
            </Table.Cell>
            <Table.Cell>
              <span>actions</span>
            </Table.Cell>
          </Table.Row>
        </Table.Head>

        <Table.Body>
          {data.getDomainRecords.host.map((e, i) => (
            <Table.Row key={i}>
              <Table.Cell>
                <EasyEdit
                  type="text"
                  value={e.type}
                  onSave={(value) => setRecords((records) => ({ ...records[i], type: value }))}
                />
              </Table.Cell>
              <Table.Cell>
                <EasyEdit
                  type="text"
                  value={e.address}
                  onSave={(value) => setRecords((records) => ({ ...records[i], address: value }))}
                />
              </Table.Cell>
              <Table.Cell truncate={true} align="left">
                <EasyEdit
                  type="text"
                  value={e.name}
                  onSave={(value) => setRecords((records) => ({ ...records[i], name: value }))}
                />
              </Table.Cell>
              {e.type === "MX" ? (
                <Table.Cell align="right">
                  <EasyEdit
                    type="text"
                    value={e.mxPref}
                    onSave={(value) => setRecords((records) => ({ ...records[i], mxPref: value }))}
                  />
                </Table.Cell>
              ) : (
                <Table.Cell></Table.Cell>
              )}
              <Table.Cell>
                <EasyEdit
                  type="text"
                  value={e.ttl}
                  onSave={(value) => setRecords((records) => ({ ...records[i], ttl: value }))}
                />
              </Table.Cell>
              <Table.Cell>
                <button>delete row</button>
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </TableComp>

      <button>add row</button>

      </>
    );
  }

Answer 1

您可以将 useState 与对象一起使用。

注意：未经测试，但类似这样

const [records, setRecords] = useState({
          hostName: "",
          recordType: "",
          address: "",
          mxPref: "",
          ttl: "",
        });

...

onSave={() => setRecords(records => ({...records, hostName: e.target.value}))

如果需要数组，使用 Object.keys(records) 或 Object.values(records) 进行转换。

Answer 2

所以这就是我发现对我有用的东西：

const [records, setRecords] = useState([""]);

useEffect(() => {
  if (data && data.getDomainRecords) {
    setRecords(data.getDomainRecords.host);
  }
}, [data]);

const updateItem = (prop, event, index) => {
  const old = records[index];
  const updated = { ...old, [prop]: event };
  const clone = [...records];
  clone[index] = updated;
  setRecords(clone);
};

const [exeRecords, { data: datalol }] = useMutation(SET_DOMAIN_RECORDS, {
  variables: {
    domain: domain,
    domainRecordInput: records.flatMap((e) => [
      {
        hostName: e.name,
        recordType: e.type,
        address: e.address,
        mxPref: e.mxPref,
        ttl: e.ttl,
      },
    ]),
  },
});

...

onSave={(e) => updateItem("ttl", e, i)}