Reactjs 如何避免react js中出现空动态li

我无法避免列表显示名称中的动态“li”，我正在使用map函数获取名称列表。这是我为得到答案而编写的代码示例。有人能帮忙吗

import React from "react";


    function App() {
      const people = [
        { name: 'chris' },
        { name: 'chris' },
        { name: 'chris' },
        { name: '' },
        { name: '' },
        { name: 'chris' },
        { name: 'chris' },
        { name: 'nick' }
      ];

      return (
        <div>
          {people.map(person => (
            <li>{person.name}</li>
          ))}
        </div>
      );
    }
    export default App;

从“React”导入React；
函数App（）{
康斯特人=[
{姓名：'克里斯'}，
{姓名：'克里斯'}，
{姓名：'克里斯'}，
{名称：''}，
{名称：''}，
{姓名：'克里斯'}，
{姓名：'克里斯'}，
{name:'nick'}
];
返回(
{people.map（person=>(
{person.name}
))}
);
}
导出默认应用程序；

放置条件

导出默认函数App（）{
康斯特人=[
{姓名：'克里斯'}，
{姓名：'克里斯'}，
{姓名：'克里斯'}，
{名称：''}，
{名称：''}，
{姓名：'克里斯'}，
{姓名：'克里斯'}，
{name:'nick'}
];
返回(
{people.map（（person，i）=>(
person.name&
{person.name}
))}
);
}

如下所示：

import React from "react";


function App() {
  const people = [
    { name: 'chris' },
    { name: 'chris' },
    { name: 'chris' },
    { name: '' },
    { name: '' },
    { name: 'chris' },
    { name: 'chris' },
    { name: 'nick' }
  ];

  return (
    <div>
     {people.map(({ name }, index)=> name && (
       <li key={name + index}>{name}</li>
     ))}
    </div>
  );
}

export default App;

import React from "react";


function App() {
  const people = [
    { name: 'chris', key: '345654' },
    { name: 'chris', key: '923789' },
    { name: 'chris', key: '952374' },
    { name: '', key: '100345' },
    { name: '', key: '0876367' },
    { name: 'chris', key: '123876' },
    { name: 'chris', key: '236543' },
    { name: 'nick', key: '956799' }
  ];

  return (
    <div>
     {people.map(({ name, key }, index)=> name && (
       <li key={key}>{name}</li>
     ))}
    </div>
  );
}

export default App;

---

对于正在渲染的项目，

键应是唯一且稳定的。
避免动态“li”的确切含义是什么？请使用Destruction，它使您的代码基于AirBnB ESLint配置更具可读性。为了避免渲染，请参见。也许首先过滤列表并删除
name='
我建议您不要使用
index
作为
键
道具的项目，这会导致ReactJS比较的性能低下，我为您的好尝试保留了upvote。但更多信息请参阅。非常感谢。。。我将不再使用索引
import React from "react";


function App() {
  const people = [
    { name: 'chris', key: '345654' },
    { name: 'chris', key: '923789' },
    { name: 'chris', key: '952374' },
    { name: '', key: '100345' },
    { name: '', key: '0876367' },
    { name: 'chris', key: '123876' },
    { name: 'chris', key: '236543' },
    { name: 'nick', key: '956799' }
  ];

  return (
    <div>
     {people.map(({ name, key }, index)=> name && (
       <li key={key}>{name}</li>
     ))}
    </div>
  );
}

export default App;