Datepicker React - 很难显示日期

Question

我正在尝试呈现多个输入（名称、位置、植物数量和 2 个日期）。由于某些原因，这 2 个日期不想显示，它们以数组格式显示...我尝试了多种方式来解决问题，但没有任何效果:( 有什么想法吗？

这是App部分

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'，代表当前对象。在这种情况下，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>

中打印它们

Datepicker React - 很难显示日期

Datapicker React - Having a hard time displaying the date

arrays

datepicker

reactjs