反应错误：无法读取未定义的属性“用户”

Question

我正在尝试运行此代码（从某个来源获取），其中动态创建输入并在提交时记录值。 我收到此错误：

在调用 createUI 时无法读取未定义的属性“用户”。

有人可以帮我吗？

import React, { useState } from "react";
import ReactDOM from "react-dom";

export default function App() {
  const [state, setState] = useState({
    users: [{ firstName: "", lastName: "" }]
  });

  const addClick = () => {
    setState(prevState => {
      users: [...prevState.users, { firstName: "", lastName: "" }];
    });
  };
  const createUI = () => {
    state.users.map((el, i) => {
      return (
        <div key={i}>
          <input
            placeholder="First Name"
            name="firstName"
            value={el.firstName || ""}
            onChange={handleChange}
          />
          <input
            placeholder="Last Name"
            name="lastName"
            value={el.lastName || ""}
            onChange={handleChange}
          />
          <input type="button" value="remove" onClick={removeClick} />
        </div>
      );
    });
  };

  const handleChange = (i, e) => {
    const { name, value } = e.target;
    let users = [...state.users];
    users[i] = { ...users[i], [name]: value };
    setState({ users });
  };

  const removeClick = i => {
    let users = [...state.users];
    users.splice(i, 1);
    setState({ users });
  };

  const handleSubmit = event => {
    alert("A name was submitted: " + JSON.stringify(this.state.users));
    event.preventDefault();
  };
  return (
    <form onSubmit={handleSubmit}>
      {createUI()}
      <input type="button" value="add more" onClick={addClick()} />
      <input type="submit" value="Submit" />
    </form>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

// const rootElement = document.getElementById("root");
// ReactDOM.render(<App />, rootElement)

这里是沙盒 -> https://codesandbox.io/s/dynamic-fields-23cw4?fontsize=14&hidenavigation=1&theme=dark

Answer 1

您的代码存在 3 个问题，

1. 您执行了 onclick 处理程序，addClick 触发了无限循环
2. createUI 方法未返回已创建组件的数组
3. addClick 函数的 setState 语法不正确。

const {useState} = React;

function App() {
  const [state, setState] = useState({
    users: [{ firstName: "", lastName: "" }]
  });

  const addClick = () => {
    setState(prevState => {
      return { users: [...prevState.users, { firstName: "", lastName: "" }] };
    });
  };
  const createUI = () => {
    return state.users.map((el, i) => {
      return (
        <div key={i}>
          <input
            placeholder="First Name"
            name="firstName"
            value={el.firstName || ""}
            onChange={(e)=>handleChange(e, i)}
          />
          <input
            placeholder="Last Name"
            name="lastName"
            value={el.lastName || ""}
            onChange={(e)=>handleChange(e, i)}
          />
          <input type="button" value="remove" onClick={removeClick} />
        </div>
      );
    });
  };

  const handleChange = (e, i) => {
    const { name, value } = e.target;
    let users = [...state.users];
    users[i] = { ...users[i], [name]: value };
    setState({ users });
  };

  const removeClick = i => {
    let users = [...state.users];
    users.splice(i, 1);
    setState({ users });
  };

  const handleSubmit = event => {
    alert("A name was submitted: " + JSON.stringify(this.state.users));
    event.preventDefault();
  };
  return (
    <form onSubmit={handleSubmit}>
      {createUI()}
      <input type="button" value="add more" onClick={addClick} />
      <input type="submit" value="Submit" />
    </form>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

错误 1：

如果你返回一个没有返回语句的对象，它应该用括号括起来

const addClick = () => { setState(prevState => ({ users: [...prevState.users, { firstName: "", lastName: "" }]; })); };

错误 2：

缺少返回语句，

const createUI = () => { return state.users.map((el, i) => { return ( <div key={i}> <input placeholder="First Name" name="firstName" value={el.firstName || ""} onChange={handleChange} /> <input placeholder="Last Name" name="lastName" value={el.lastName || ""} onChange={handleChange} /> <input type="button" value="remove" onClick={removeClick} /> </div> ); }); };

错误 3：

onClick 应该有一个函数，但是你设置了一个从addClick 返回的值，即undefined

... <input type="button" value="add more" onClick={addClick} /> ...

Answer 3

除了@norbiial 的答案应该是公认的答案：您的addClick 函数不正确。您的 setState 呼叫没有返回任何内容，这意味着一旦您单击添加按钮，它就会再次中断。

改成这样：

const addClick = () => {
  setState(prevState => ({
    users: [...prevState.users, { firstName: "", lastName: "" }]
  }));
};

createUI 也会出现同样的问题。

Answer 4

该错误的原因是以下行：

<input type="button" value="add more" onClick={addClick()} />

从技术上讲，您正在调用 addClick 函数，该函数会更改您的 state 对象的值。工作正常的解决方案如下：

<input type="button" value="add more" onClick={() => addClick()} />

或更短的方式：

<input type="button" value="add more" onClick={addClick} />

希望对你有帮助！