Datepicker React - 很难显示日期

Question

我正在尝试渲染几个输入（名称、位置、植物数量和 2 个日期）。 由于某些原因，这两个日期不想显示，它们保持在数组格式中......我尝试了多种方式进行故障排除，但没有任何效果:( 有什么想法吗？

这是应用程序部分

let InitialOwners = [
  { nameOwner: 'Julie S', locationOwner: "Eixample", plantsOwner: "2" , startDateOwner: [{}] , endDateOwner : [] }
];


function App() {

  const [owners, setOwners] = useState(InitialOwners);


 
  // to get the data from PO form
  function handleOwnerData(ownerData) {
    let newOwners = [...owners, ownerData];
    setOwners(newOwners)
    console.log(`Owner Data: ${ownerData.locationOwner} ${ownerData.nameOwner} ${ownerData.plantsOwner} ${ownerData.startDateOwner} ${ownerData.endDateOwner}`)
    }

这里是应该显示数据的列表部分

import React  from "react";

function DashboardUsers(props){
    return ( 
        <div className ="Dashboard">
            <h2> Welcome to the Dashboard</h2>
            <h4> Here are the current owners </h4>
            <ul>
                {
                    props.owners.map((owners,i) => (
                        <div key={i}>
                            <li> Name: {owners.nameOwner}</li>
                            <li> Location: {owners.locationOwner} </li>
                            <li> # of plants: {owners.plantsOwner} </li>
                            <li> Start Date: [owners.startDateOwner] </li> 
                            <li> End Date:[owners.endDateOwner] </li>
                        </div>
                    ))
                }
            </ul>
        </div>
    )
}

export default DashboardUsers;

这是它在浏览器上的样子：D browser image

Answer 1

当您使用对象映射数组时，映射中的每个条目（在您的情况下为“所有者”）代表当前对象。在这种情况下，owners.startDateOwner 是对象数组中的对象数组。如果你想迭代它，你需要嵌套另一个地图：

{
                    props.owners.map((owners,i) => (
                        <div key={i}>
                            <li> Name: {owners.nameOwner}</li>
                            <li> Location: {owners.locationOwner} </li>
                            <li> # of plants: {owners.plantsOwner} </li>
                            <li> Start Date: {owners.startDateOwner.map((ownerStartDate) => <span>{ownerStartDate}</span>)} </li> 
                            <li> End Date:[owners.endDateOwner] </li>
                        </div>
                    ))
                }

这将遍历日期并将它们打印到<span>