在 html table 中添加动态行有反应。独特的关键道具行为

Question

尝试在 HTML table (React) 中添加动态行。当，道具被传递到不同的组件来渲染 table 我收到警告 Warning: Each child in a list should have a unique "key" prop. 但是当 table 在同一组件中呈现时。没有警告！！！

我研究了其他解决方案 , , In solution ，答案是 The key needs to go on the outermost returned element. In your specific case, that means changing this:。我从行组件返回，但行为不同。

这会引发警告

<Box>
        <form onSubmit={handleSubmit(onSubmit)}>
          <table>
            <thead>
              <tr>
                <th scope="col" width="20%">
                  Item Name
                </th>
                <th scope="col" width="6%">
                  Rack
                </th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {rowsData.map((data, index) => (
                <Rows index={index} data={data} handleChange={handleChange} />
              ))}
            </tbody>
          </table>
        </form>
        <IconButton
          mt={4}
          variant="pill-add-row"
          type="button"
          icon={<VscAdd />}
          onClick={addTableRows}
        />
      </Box>

而这不会

<Box>
        <form onSubmit={handleSubmit(onSubmit)}>
          <table>
            <thead>
              <tr>
                <th scope="col" width="20%">
                  Item Name
                </th>
                <th scope="col" width="6%">
                  Rack
                </th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {rowsData.map((data, index) => (
                // <Rows index={index} data={data} handleChange={handleChange} />
                <tr key={data.id}>
                  <td>
                    {/* <FormControl isInvalid={errors.iname}> */}
                    <FormControl>
                      <Input
                        type="text"
                        name="iname"
                        value={data.iname}
                        {...register("iname")}
                        onChange={(event) => handleChange(index, event)}
                        // placeholder={data.id}
                      />
                    </FormControl>
                  </td>
                  <td>
                    {/* <FormControl isInvalid={errors.rackno}> */}
                    <FormControl>
                      <Input
                        type="number"
                        name="rackno"
                        width={"240px"}
                        value={data.rackno}
                        {...register("rackno")}
                        onChange={(event) => handleChange(index, event)}
                        // placeholder={data.id}
                      />
                    </FormControl>
                  </td>
                  <td>
                    <IconButton icon={<VscAdd />} variant="pill" />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </form>
        <IconButton
          mt={4}
          variant="pill-add-row"
          type="button"
          icon={<VscAdd />}
          onClick={addTableRows}
        />
      </Box>

我已经为 data.id

使用了 currentTime, nanoid()

Answer 1

将word(prop) index改为key如下图

{rowsData.map((data, index) => (
   <Rows key={index} data={data} handleChange={handleChange} />
))}

在 html table 中添加动态行有反应。独特的关键道具行为

Adding dynamic rows in html table react. Unique key prop behaivior

javascript

javascript-objects

reactjs