reactjs - 如何在反应 js 中避免空动态 li

Question

我无法避免列表显示名称中的动态“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;

标签： reactjs

Answer 1

放置条件...现场工作演示

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

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