独特的“关键”道具。警告我还有钥匙吗

Question

我的控制台出现错误，

我的JSON在这里https://dev.justinblayney.com/wp-content/uploads/2020/12/main-menu.json_.zip

警告：列表中的每个孩子都应该有一个唯一的“键”道具。

在我的页面上显示的是（所以他们都是独一无二的，所以WTF反应）

钥匙：2429钥匙：2430钥匙：3859钥匙：2421钥匙：2802钥匙：2428

另一方面，我发现使用函数获取JSON文件是一种糟糕的方式，我还收到内存泄漏警告，我在网上看到的每个教程都使用类或Axio

检查MyRoutes的渲染方法。看见https://reactjs.org/link/warning-keys了解更多信息。MyRoutes@http：//localhost:3000/react wordpress headless/static/js/main。大块js:63:81分区Router@http：//localhost:3000/react-wordpress-headless/static/js/0。大块js:35747:30BrowserRouter@http：//localhost:3000/react-wordpress-headless/static/js/0。大块js:35367:35App@http：//localhost:3000/react wordpress headless/static/js/main。大块js:94:1

    function MyRoutes() {
    
    const [myrt, setMyrt] = useState([]); 
  
    
    useEffect(() => {
        fetch("main-menu.json" ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    })
        .then(res => res.json())
    
        .then(json =>{
             setMyrt(json.items)}
              )
         });
        
    
    return (
        <>
            {Object.keys(myrt).map((ky, idx)=> (
            <>
             <h2>KEY: {myrt[ky].ID} </h2>
        <Route exact path={`/${myrt[ky].slug}`} component={Page} key={myrt[ky].ID}  /></>
            ))} 
        </>
  
    );
}

Answer 1

您需要顶部组件/标记上的键，该组件/标记正在地图上渲染。示例：如果使用div

<div key={myrt[ky].ID} >
    <h2>KEY: {myrt[ky].ID} </h2>
    <Route exact path={`/${myrt[ky].slug}`} component={Page} />
</div>

Answer 2

在列表子元素的第一级需要key属性，因此我认为在您的示例中，您的. map中的React片段需要有此键。

Answer 3

keyprop应该定义在最前面的元素上，在您的情况下是React。片段。

function MyRoutes() {
  const [myrt, setMyrt] = useState([]);

  useEffect(() => {
    fetch('main-menu.json', {
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
    })
      .then((res) => res.json())

      .then((json) => {
        setMyrt(json.items);
      });
  });

  return (
    <>
      {Object.keys(myrt).map((ky, idx) => (
        <React.Fragment key={ky}>
          // ------------^
          <h2>KEY: {myrt[ky].ID} </h2>
          <Route exact path={`/${myrt[ky].slug}`} component={Page} key={myrt[ky].ID} />
        </React.Fragment>
      ))}
    </>
  );
}