javascript - 如何映射SetState函数？

Question

如何映射 setState 函数？

这是我的 setState 函数示例:

const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');

这是我的映射技术:

  {[{ label: "First Name", state: 'firstName' , function: 'setFirstName'},
                  { label: "Last Name", state: 'lastName' },
                  { label: "Email", state: 'email' },
                  { label: "Password", state: 'password' },
                  { label: "Phone", state: 'phone' }].map((item, index) => (
                    <div>
                      <TextField
                        id="outlined-basic"
                        key={index}
                        label={item.label}
                        variant="outlined"
                        onChange= {e => setFirstName(e.target.value)}          
                      />
                      <br></br><br></br>
                    </div>
                  )
  )}

这可行，但我想以这样的方式更改 onChange，而不是 setFirstName，我可以传入函数并映射所有它们(例如，firstName、lastName 等)。我该如何解决这个问题？

Answer 1

只需删除 state 和 function 的引号，并在 onChange 中使用 function 即可。

    [
      { label: 'first name', state: firstName, function: setFirstName },
      { label: 'last name', state: lastName, function: setLastName },
    ].map((item, index) => (
      <TextField
        key={index}
        label={item.label}
        onChange={e => item.function(e.target.value)} // use state function       
      />
    ))