React如何从对象数组提取delivery_time_frame前10位存入state并渲染

你代码存在两处核心逻辑错误：

• 误用filter方法：filter用于筛选符合条件的数组元素，返回值会被判定为布尔值决定元素是否保留，不会修改元素结构。你需要转换数组元素提取字段，应该使用map方法。
• state赋值逻辑错误：你将整个处理后的数组作为单个元素推入state，导致state变为二维数组，遍历渲染时无法正常展示内容。

修正后完整代码 #

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const Defaultdata = [
    {
      date_listed: "4 hours ago",
      id: "7857699961",
      delivery_time_frame: "2021-10-25 - 2021-11-14",
      distance: "22.8 km",
      time_stamp: "2021-10-25 16:36:54",
      watched: "yes"
    },
    {
      date_listed: "3 days ago",
      id: "8358962006",
      delivery_time_frame: "2021-10-18 - 2021-10-24",
      distance: "4.3 km",
      time_stamp: "2021-10-22 16:54:12"
    },
    {
      date_listed: "4 hours ago",
      delivery_id: "8146462294",
      delivery_time_frame: "2021-10-25",
      distance: "4.3 km",
      time_stamp: "2021-10-25 16:12:32"
    },
    {
      date_listed: "4 hours ago",
      delivery_id: "8146462294",
      delivery_time_frame: "2021-10-25 - 2021-10-31",
      distance: "4.3 km",
      time_stamp: "2021-10-25 16:12:32"
    },
    {
      date_listed: "4 hours ago",
      delivery_id: "8146462294",
      delivery_time_frame: "2021-10-25 - 2021-11-14",
      distance: "4.3 km",
      time_stamp: "2021-10-25 16:12:32"
    }
  ];

  // 用map遍历提取每个元素的delivery_time_frame前10位，这里使用更规范的substring替代遗留方法substr
  const dateList = Defaultdata.map(item => item.delivery_time_frame.substring(0, 10));
  // 静态数据可直接作为state初始值，无需使用useEffect
  const [specificdatevalues, setspecificdatevalues] = useState(dateList);

  return (
    <div className="App">
      {specificdatevalues.map((dates, i) => (
        // 遍历元素添加唯一key，实际项目中如果有唯一业务ID优先用ID替代索引
        <li key={i}>{dates}</li>
      ))}
    </div>
  );
}

如果你的原始数据是从接口异步获取的，只需要在接口请求成功的回调里，先处理提取日期字段，再调用setspecificdatevalues传入处理好的数组即可。

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