这是从哪里来的：警告：列表中的每个 child 都应该有一个唯一的 "key" 道具

Question

我尝试了这个 CodeSandbox 并且还在本地的 VCode 中尝试了它但是看不到日志中这个警告的来源：

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `App`. See https://reactjs.org/link/warning-keys for more information.
    at CurrentForm (http://localhost:3000/static/js/main.chunk.js:1284:11)
    at App (http://localhost:3000/static/js/main.chunk.js:1102:70)

我更改了 CurrentForm 组件“Form.js”map，因此 key 有一个唯一的 ID，例如“npm i uuid”，但事实并非如此。

Answer 1

这段代码是index.js的Line: 18：

<Form
    {...props}
    render={prevStep => <NavigationButtons prevStep={prevStep} (ADD KEY HERE)/>}
/>

您应该在我在您的 NavigationButtons 组件中声明的位置添加一个唯一键。

Answer 2

将密钥添加到 Form 组件：Codesandbox

import React, { useReducer } from "react";
import ReactDOM from "react-dom";
import { Router } from "@reach/router";
import { Form, Result, Landing } from "./steps";
import { NavigationButtons } from "./components";
import { initialState, dataReducer, DataContext } from "./dataContext";
import { formConfig } from "./consts/formConfig";

import "./styles.css";

function App() {
  return (
    <div>
      <DataContext.Provider value={useReducer(dataReducer, initialState)}>
        <Router>
          <Landing path="/" />
          {formConfig.map(({ prevStep, ...props }, index) => (
            <Form
              key={index}
              {...props}
              render={(prevStep) => <NavigationButtons prevStep={prevStep} />}
            />
          ))}
          <Result path="result" />
        </Router>
      </DataContext.Provider>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 3

const [listValue, setListValue] = useState("");
const [items, setItems] = useState([]);
const addItem = () => {
    if (!listValue) {
      alert("Please Enter the list name");
    } else {
      setItems([listValue, ...items]);
      setListValue("")
      // return;
    }
 };
 
 return(
 <>
 <div className="todo-add">
        <div className="todo-input">
          <input
            className="todo-input-box"
            placeholder="Add List"
            value={listValue}
            onChange={(event) => setListValue(event.target.value)}
          />
          <i className="fas fa-plus" onClick={() => addItem()}></i>
        </div>
   </div>
   {
   items.map((Elements, index)=>{
   return (
              <div className="todo-input" key={index}>
                <div className="list-added">
                  <h4>{Elements}</h4>
                </div>
                <div className="todo-edits" >
                  <i className="fas fa-edit"></i>
                  <i className="fas fa-trash-alt"></i>
                </div>
              </div>
            );
   })
   }
 </>
 )

这是从哪里来的：警告：列表中的每个 child 都应该有一个唯一的 "key" 道具

Where is this coming from: Warning: Each child in a list should have a unique "key" prop

warnings

dictionary

unique-key

reactjs