当 props 也被传递时，如何映射元素？答案

【问题标题】：How can I map elements when props are also passed?当 props 也被传递时，如何映射元素？
【发布时间】：2020-02-24 10:33:53
【问题描述】：

我在我的代码中使用了一堆文本字段，我想映射它们而不是多次编写它们。但是，我无法这样做，因为我的文本字段还需要来自构造函数道具的元素。

import React, { Component, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import PermanentDrawerLeft from '../../components/drawer/drawer';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';

export default class AddUserPage extends Component <{}, { firstName: string, lastName: string, email: string,phone: string,password: string }>{
  constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
      firstName: '',
      lastName: '',
      phone: '',
      email: '',
      password: '',
    };
  }


  render() {
    return (
      <div>
     <PermanentDrawerLeft></PermanentDrawerLeft>
     <div className='main-content'>
     <form className="form" noValidate autoComplete="off">

     {

       <TextField id="outlined-basic" label="First Name" variant="outlined" onChange={e => {
                this.setState({firstName: e.target.value})
              }}/>
     </form>
     </div>
   </div>
    );
  }
}

如果我使用以下映射：


     {
              [{ label: 'First Name', state: this.state.firstName }].map((item, index) => (
                <TextField
                  id="outlined-basic"
                  label={item.label}
                  variant="outlined"
                  onChange={e => this.setState({ [item.state]: e.target.value })}
                />
              ))
            }

我在最后一行收到此错误：

Argument of type '{ [x: string]: string; }' is not assignable to parameter of type '{

代码沙盒： https://codesandbox.io/s/goofy-cray-o87fm?fontsize=14&hidenavigation=1&theme=dark

【问题讨论】：

标签： javascript reactjs typescript mapping material-ui

【解决方案1】：

我发现你的第二个 sn-p 几乎没有语法问题：

您不应将 firstName 包装到对象字面量 ([{label: 'First Name', state: 'firstName'}]) 中的花括号中
对于动态对象属性，您应该将其包裹在方括号中，如下所示：this.setState({[item.state]: e.target.value})
另外，源数组中缺少右方括号

因此，您应该一直在尝试的代码看起来像：

{
    [{label: "First Name", state: 'firstName'}].map(item, index) => (
        <TextField
          id="outlined-basic"
          key={index}
          label={item.label}
          variant="outlined"
          onChange={e => this.setState({[item.state]: e.target.value} as any)}
        />
    ))
}

p.s.这些是我可以在没有看到更广泛的代码上下文的情况下得出的结论

【讨论】：

这并不完全有效，你能在我更新的 qs 中看到代码吗？如果我写了，请说明：firstName，我得到了 name firstName not found 的错误。所以我把它改成了 this.state.firstName 但这也不起作用
这只是为了提供信息。我修复了 firstName not found 问题，但我仍然得到更新 qs 中提到的问题
codesandbox.io/s/…
不，这也不起作用。你可以在这个代码框上试试吗？谢谢！
@x89 ：稍作改动renders perfectly fine - 没有错误，没有问题。检查分叉的sandbox。