javascript - React 将数组映射到下拉问题

Question

对话框.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 次。我想让下拉列表可以从 中的 4 个年龄中选择peopleArray。

标签： javascriptarraysreactjs

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>
)}