在使用 uuid 时，列表中的每个孩子都应该有一个唯一的“key”道具

Question

I have a recursive component which is maping over rows and columns so the indexes might be repeated if I used the index of each map function. Instead I used the package uuid and used v4() as a key everywhere but still getting error:

  import { v4 } from "uuid";

 //....allcode before return 
        return (
          <>
            <Table.Header key={v4()} fullWidth>
              <Table.Row
                columns={size(Object.keys(data?.records[0]?.data)) + 2}
                key={v4()}
              >
                <Table.HeaderCell key={v4()}></Table.HeaderCell>
                {Object.keys(data?.records[0]?.data).map((key, ind) => {
                  return <Table.HeaderCell key={v4()}>{key}</Table.HeaderCell>;
                })}
                <Table.HeaderCell key={v4()}></Table.HeaderCell>
              </Table.Row>
            </Table.Header>
    
            {data?.records.map((firstLevel, ind1) => {
              return (
                <>
                  <Table.Body key={v4()}>
                    {/* here we render each row of data  */}
                    <Table.Row key={v4()}>
                      {size(firstLevel.kids) > 0 ? (
                        <Table.Cell key={v4()}>
                          <Icon
                            name="caret right"
                            link
                            size="large"
                            rotated={
                              show[ind1 + depth * 1000] ? "clockwise" : undefined
                            }
                            onClick={() => toggleShow(ind1, depth)}
                          />
                        </Table.Cell>
                      ) : (
                        <Table.Cell key={v4()}></Table.Cell>
                      )}
    
                      {Object.keys(firstLevel.data).map((key) => {
                        return (
                          <Table.Cell key={v4()}>{firstLevel.data[key]}</Table.Cell>
                        );
                      })}
                      <Table.Cell key={v4()}>
                        <Icon
                          name="close"
                          link
                          size="large"
                          onClick={() => removeData(ind1, depth, indArrayState)}
                        />
                      </Table.Cell>
                    </Table.Row>
                  </Table.Body>
    
                  {show[ind1 + depth * 1000] && size(firstLevel.kids) > 0 ? (
                    <>
                      {indArray.splice(depth, 1, ind1)}
    
                      <Table.Header key={v4()} fullWidth>
                        <Table.Row key={v4()}>
                          <Table.HeaderCell key={v4()}>
                            {Object.keys(firstLevel.kids)}
                          </Table.HeaderCell>
                        </Table.Row>
                      </Table.Header>
                      <RecursiveTable
                        data={firstLevel.kids[Object.keys(firstLevel.kids)[0]]}
                        allData={allData}
                        depth={depth + 1}
                        setAllData={setAllData}
                        indArray={indArray}
                      />
                    </>
                  ) : null}
                </>
              );
            })}
          </>
        );
    }

Any Idea?

Thank you.

Stackoverflow:It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.

Answer 1

It looks like you are missing a key on a React Fragment. You could replace <> with <React.Fragment> and do something like the following:

data?.records.map((firstLevel, ind1) => {
   return (
      <React.Fragment key={x}>
        ...
      </React.Fragment>>

Reference