TypeError: Cannot read property 'name' of null when pressing any key react reactjs javascript redux

Question

我不熟悉反应并尝试显示输入字段的更新值。当我按任意键时，它会抛出 TypeError: Cannot read 属性 'name' of null 错误。

onChange = (e) => {
    e.preventDefault();
    this.setState((prevState) => ({
      profile: {
        ...prevState.profile,
        [e.target.name]: e.target.value,  //this is where the error is pointed
      },
    }));

这是我的状态，我在从 redux 存储中获取值后在 componentDidUpdate 中设置我的状态。

状态：

state = {
    title: "Create Your Profile",
    profile: {},
    errors: {},
    toggleSocialProfileInput: false,
  };

componentDidUpdate:

componentDidUpdate(prevProps) {
    if (this.props.errors !== prevProps.errors)
      this.setState({ errors: this.props.errors });
    if (this.props.profileReducer !== prevProps.profileReducer)
      this.setState({ profile: data, title: "Edit Your Profile" });
  }

我使用这些作为输入，我使用配置文件状态设置我的值

const { profile } = this.state;

               <TextField
                placeholder="* Profile Handle"
                name="handle"
                value={profile.handle}
                onChange={this.onChange}
                error={errors.handle}
                info="A unique handle for your profile URL. Your full name, company name, nickname"
              />
              <TextField
                placeholder="Status"
                name="status"
                value={profile.status ? profile.status : ""}
                onChange={this.onChange}
                error={errors.status}
                info="What are you upto? Or some quote"
              />
              <TextField
                placeholder="Location"
                name="location"
                value={profile.location ? profile.location : ""}
                onChange={this.onChange}
                error={errors.location}
                info="City or City, State (eg. Toronto, ON)"
              />

如果您想查看我的 TextField 组件：

const TextField = ({
  name,
  placeholder,
  error,
  info,
  type,
  icon,
  disabled,
  value,
  onChange,
}) => {
  const containerClass = icon ? "input-group mb-3" : "form-group";
  return (
    <div className={containerClass}>
      {icon && (
        <div className="input-group-prepend">
          <span className="input-group-text">
            <i className={icon} />
          </span>
        </div>
      )}
      <input
        type={type}
        className={`form-control form-control-lg ${error && "is-invalid"}`}
        placeholder={placeholder}
        name={name}
        value={value}
        onChange={onChange}
        disabled={disabled}
      />
      {info && <small className="form-text text-muted">{info}</small>}
      {error && <div className="invalid-feedback">{error}</div>}
    </div>
  );
};

我知道的一种方法是，我可以在状态中声明文本字段的名称而不是配置文件，但我想保持代码简短，因此想在状态中使用配置文件对象。

Answer 1

您正在使用回调设置状态。所以首先在变量中定义 e.target，然后在你的 setState 回调中使用它。

这应该有效

onChange = (e) => {
    e.preventDefault();
    const target = e.target;
    this.setState((prevState) => ({
      profile: {
        ...prevState.profile,
        [target.name]: target.value, 
      },
    }));

和event pooling,

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

TypeError: Cannot read property 'name' of null when pressing any key react reactjs javascript redux

TypeError: Cannot read property 'name' of null when pressing any key react reactjs javascript redux

javascript

reactjs

redux

mern