Question

Dialog.js

  const Dialog = ({label, onClose, open}) => {
     handleSubmit=()=>{};
        return (
         <Form onSubmit={handleSubmit}>
          {() => (
           <Dialog 
            onClose={onClose}
            open={open}
            title={() => label}
            content={() => <RatingTable />}}
            action={() => {}}
           />
          )}
         </Form>
        )
    }

RatingTable.js

const RatingTable = ()=> {
  return(
   <table>
     <thead>
      <tr>
        <header1>
        <header2>
      </tr>
     <thead>
     <tbody>
      {PeopleList.map(People=>(
        <PeopleRow {...people} id={people.id} name={people.name}>
      ))}
     </tbody>
   </table>
)}

PeopleList.js

const List = [
{id:1, name:"jack", sex:"male", age:23},
{id:2, name:"marry", sex:"female", age:18},
{id:3, name:"paul", sex:"male", age:12},
{id:4, name:"katty", sex:"female", age:20}
]

 const PeopleArray = List.reduce(
 (acc, {age}) =>{
   acc.push(age);
  return acc;
  },[]);

PeopleRow.js

const PeopleRow = name => {
 return (
  <tr>
   <td>
    <TextField value={name}>
   </td>
   <td>
    <DropDownField source={PeopleList}>
   </td>
  </tr>
 )
}

因此，理想情况下，我想使用PeopleArray组件中显示的年龄数组DropDownFiled，但是某些年龄值在下拉列表中没有显示，它仅显示选择的文本4次。我要创建一个下拉列表，可以从peopleArray中的这4个年龄段中进行选择。

Answer 1

在RatingTable.js文件中，您将people与People拼写错误。

const RatingTable = ()=> {
return(
   <table>
     <thead>
      <tr>
        <header1>
        <header2>
      </tr>
     <thead>
     <tbody>
      {PeopleList.map((people) => (           // Change this, replace `People` with `people`
        <PeopleRow {...people} id={people.id} name={people.name}>
      ))}
     </tbody>
   </table>
)}

反应将数组映射到下拉问题

1 个答案: