React中如何用map遍历数组时不显示第一个元素？

从后端获取到如下数组：

[  
  {
    id: 0,
    name: "John",
    language: "English" 
  },
  {
    id: 1,
    name: "Chris",
    language: "Spanish" 
  },
  {
    id: 2,
    name: "Bastian",
    language: "German" 
  }
]

需求是将数组中对象的language字段渲染到表格中，通过map遍历实现，但不显示第一个对象的条目。尝试用shift()方法移除第一个元素时，报错：TypeError: lang.language.shift is not a function。

相关代码如下：

Parent.js #

const [language, setLanguage] = useState([])

useEffect(() => {
 axios
    .get('api').then((res) => {setLanguage(response.data.languages)})
}, [])

Child.js #

return(
       {language.map((lang, i) => {
           return (
               <tr key={"item-" + i}>
                  <td>
                    <div>
                       <input
                          type="text"
                          value={
                            lang.language
                              ? lang.language.shift()
                              : lang.language
                          }
                      </div>                 
                    </td>
                </tr>
          ))}
)

报错原因 #

lang.language是字符串类型（比如"English"），而shift()是数组专属方法，只能用于数组，所以直接调用会触发类型错误。你错误地把单个对象的language属性当成数组来操作了。

正确实现方式 #

要跳过第一个元素，有两种简单可行的方法：

1. 遍历前截取数组（推荐）
   在map之前，用slice(1)截取数组从索引1开始的部分，直接遍历处理后的子数组，自然不会包含第一个元素：

// Child.js 修改后代码
return(
       {language.slice(1).map((lang, i) => {
           return (
               <tr key={"item-" + (i + 1)}> {/* 用原数组索引作为key，避免重复 */}
                  <td>
                    <div>
                       <input
                          type="text"
                          value={lang.language}
                      </div>                 
                    </td>
                </tr>
          ))}
)

slice(1)不会修改原数组，只是返回新的子数组，不会影响状态中的原始数据，更符合React状态管理的规范。

2. 遍历中判断索引跳过
   在map遍历的时候，判断当前元素的索引i，如果是0就直接返回null跳过渲染：

// Child.js 修改后代码
return(
       {language.map((lang, i) => {
           if (i === 0) return null; // 跳过第一个元素
           return (
               <tr key={"item-" + i}>
                  <td>
                    <div>
                       <input
                          type="text"
                          value={lang.language}
                      </div>                 
                    </td>
                </tr>
          ))}
)

另外注意Parent.js里的小bug：then((res) => {setLanguage(response.data.languages)})应该改成then((res) => {setLanguage(res.data.languages)})，参数是res不是response。

内容的提问来源于stack exchange，提问作者john_1