React关键项列表错误,即使我已添加所需的关键项。

huangapple go评论66阅读模式
英文:

React key item list error, even after I added the required Key

问题

以下是代码部分的中文翻译:

这是一个列表容器的示例

import { List, ListItemText, ListItem } from '@mui/material';

import FooterItem from './FooterItem';

const FooterList = ({ title, items }) => {
    return (
        <List>
            {/* 标题 */}
            <ListItem key={title}>
                <ListItemText sx={{ marginLeft: 2 }}>{title}</ListItemText>
            </ListItem>
            {/* 列表项 */}
            {items.map((item) => {
                return <FooterItem text={item.text} url={item.url} id={item.id}></FooterItem>;
            })}
        </List>
    );
};
export default FooterList;

这是具有在 `ListItem` 组件上的键的列表项示例

import { ListItemText, ListItem, ListItemButton } from '@mui/material';
const FooterItem = ({ id, text, url }) => {
    console.log(id);
    return (
        <ListItem key={id}>
            <ListItemButton>
                <ListItemText href={url} sx={{ color: 'white', marginTop: '0' }}>
                    {text}
                </ListItemText>
            </ListItemButton>
        </ListItem>
    );
};

export default FooterItem;

请注意,添加了键(key)到 ListItem 组件后,仍然出现了 React 的键错误。

英文:

Here is the list container example

import { List, ListItemText, ListItem } from &#39;@mui/material&#39;;

import FooterItem from &#39;./FooterItem&#39;;

const FooterList = ({ title, items }) =&gt; {
    return (
        &lt;List&gt;
            {/* HEADING */}
            &lt;ListItem key={title}&gt;
                &lt;ListItemText sx={{ marginLeft: 2 }}&gt;{title}&lt;/ListItemText&gt;
            &lt;/ListItem&gt;
            {/* LIST */}
            {items.map((item) =&gt; {
                return &lt;FooterItem text={item.text} url={item.url} id={item.id}&gt;&lt;/FooterItem&gt;;
            })}
        &lt;/List&gt;
    );
};
export default FooterList;

Here is the list item example with the key on the ListItem component

  import { ListItemText, ListItem, ListItemButton } from &#39;@mui/material&#39;;
const FooterItem = ({ id, text, url }) =&gt; {
    console.log(id);
    return (
        &lt;ListItem key={id}&gt;
            &lt;ListItemButton&gt;
                &lt;ListItemText href={url} sx={{ color: &#39;white&#39;, marginTop: &#39;0&#39; }}&gt;
                    {text}
                &lt;/ListItemText&gt;
            &lt;/ListItemButton&gt;
        &lt;/ListItem&gt;
    );
};

export default FooterItem;

As you can see even after adding the key to ListItem the console is showing react key item list error.
React关键项列表错误,即使我已添加所需的关键项。

答案1

得分: 0

以下是翻译好的部分:

[Update]

根据您更新的问题,以下是您需要更改的内容,位于您的FooterList组件中,即列表容器组件。

import { List, ListItemText, ListItem } from '@mui/material';

import FooterItem from './FooterItem';

const FooterList = ({ title, items }) => {
    return (
        <List>
            {/* 标题 */}
            <ListItem key={title}>
                <ListItemText sx={{ marginLeft: 2 }}>{title}</ListItemText>
            </ListItem>
            {/* 列表 */}
            {items.map((item, index) => {
                return <FooterItem text={item.text} url={item.url} key={item.id} />;
            })}
        </List>
    );
};
export default FooterList;

您可以从ListItem组件中删除key={id}。如果尽管在FooterList组件中添加了key,但仍然出现错误,这意味着您提供作为key的值可能不是唯一的,因此可以使用索引作为key,索引应该是唯一的。但要注意,使用索引作为key可能会在某些情况下导致意外行为,所以要小心。从我看到的情况来看,您的代码可以轻松地使用索引作为key,所以没有问题。但一般来说,不应该使用索引作为key,应该始终使用唯一的key。

[Old]

根据您提供的代码,我可以看到您已经将key属性应用于ListItemButton,但这不是导致您在控制台中遇到错误的原因。问题出在调用组件,即在您渲染FooterItem时。

假设您有一个父组件,在该组件中正在循环遍历项目,并在循环中包含FooterItem,以下是您应该执行的操作。

例如,您有HomePage组件,在其中包含您的FooterItem组件。代码应该如下所示。

HomePage组件

const HomePage = () => {
    return (
        {footerItems.map((item, index) => {
            return <FooterItem key={index} text={item.text} url={item.url}>;
        })}
    )
}

请注意,我在调用FooterItem的父组件中添加了key属性,而不是在FooterItem自身中添加。

希望这有所帮助。这是基于您提供的详细信息。如果您仍然遇到问题,您是否愿意发布包含FooterItem的父组件的一部分,以便我可以更好地帮助您。

英文:

[Update]

Based on your updated question here is what you need to change inside your FooterList i.e. list container component.

import { List, ListItemText, ListItem } from &#39;@mui/material&#39;;

import FooterItem from &#39;./FooterItem&#39;;

const FooterList = ({ title, items }) =&gt; {
    return (
        &lt;List&gt;
            {/* HEADING */}
            &lt;ListItem key={title}&gt;
                &lt;ListItemText sx={{ marginLeft: 2 }}&gt;{title}&lt;/ListItemText&gt;
            &lt;/ListItem&gt;
            {/* LIST */}
            {items.map((item, index) =&gt; {
                return &lt;FooterItem text={item.text} url={item.url} key={item.id} /&gt;;
            })}
        &lt;/List&gt;
    );
};
export default FooterList;

And you can remove key={id} from your ListItem component. If despite adding key in your FooterList component, you are getting the error means the value you are providing as a key might not be unique so you can use index as a key which should be unique. But be aware of some pitfalls of using index as a key as it might give you unexpected behavior in some cases. Anyways from what I see your code can easily survive using index as a key so no problem. But in general practice you should not use index as a key and always use unique key for it.

[Old]

Based on the code you provided, I can see that you have applied the key attribute to ListItemButton which here is not the cause of the error you are getting inside console. The problem is with the calling component i.e, from the component you are rendering FooterItem by adding it.

So suppose you have a parent component where you are looping through items and rendering FooterItem inside that loop here is what you should be doing.

For example you have HomePage component and inside that you are including your FooterItem component. The code should look like this.

HomePage component

const HomePage = () =&gt; {
    return (
        {footerItems.map((item, index) =&gt; {
            return &lt;FooterItem key={index} text={item.text} url={item.url}&gt;
        })}
    )
}

Note that here I have added key attribute to the parent component from where FooterItem is getting called and not in the FooterItem itself.

I hope this helps. This was based on the details you provided. If you are still facing problem, would you mind posting some portion of parent component where you are including FooterItem so I can help you in better way.

huangapple
  • 本文由 发表于 2023年3月7日 23:15:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/75663799.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定