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

Question

我的控制台出现错误，

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

警告：列表中的每个孩子都应该有一个唯一的“key”属性。

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

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

顺便说一句，我发现使用函数是获取 JSON 文件的一种糟糕方法，我还会收到内存泄漏警告，而且我在网上看到的每个教程都使用类或 axios

检查MyRoutes的渲染方法。有关更多信息，请参阅https://reactjs.org/link/warning-keys。 MyRoutes@http://localhost:3000/react-wordpress-headless/static/js/main.chunk.js:63:81 div Router@http://localhost:3000/react-wordpress-headless/static/js/0.chunk.js:35747:30 BrowserRouter@http://localhost:3000/react-wordpress-headless/static/js/0.chunk.js:35367:35 app@http://localhost:3000/react-wordpress-headless/static/js/main.chunk.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

key 属性应该在第一个元素上定义，在你的例子中是React.Fragment。

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>
      ))}
    </>
  );
}

Answer 2

对于您的内存泄漏，您无限次调用函数获取 JSON 文件，因为您没有在 useEffect 中指定任何依赖项。所以你设置数据，它重新渲染，然后永远再次获取

    useEffect(() => {
        fetch("main-menu.json" ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    })
        .then(res => res.json())
    
        .then(json =>{
             setMyrt(json.items)}
              )
         }, [] /* Adding this only runs this once */);

Answer 3

您需要它在地图上呈现的顶部组件/标签上的键。 例子： 如果你使用 div

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

Answer 4

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