问题描述

我正在尝试在 react.js 中实现一个简单的代码，用户可以使用表单输入数据，除非页面被刷新，否则数据将显示在表格中。

我已经在 Code Sandbox 中实现了一个代码，它按预期工作。然后我复制了该代码并在 IDE 中使用它。现在，相同的代码显示错误为 ==>“TypeError：无法定义属性“电子邮件”：对象不可扩展”。（我使用的是 intellij IDE 终极版）

这是沙盒的链接 =>沙盒中代码的链接

如果沙盒不工作，它自己的代码 ==>

import React, {Component} from "react";

class CustomDetails extends Component {

constructor(props) {
    super(props);
    this.state = {
        items: [{email: '', country: '', new_case: '', total_case: '', total_death: ''}],
        message: ''
    }
    this.newData = React.createRef();
    this.addForm = React.createRef();

}

addData(e) {
    e.preventDefault();
    const {items} = this.state;
    
    const newData = () => ({
        email:this.addForm.email.value,
        country:this.addForm.country.value,
        new_case:this.addForm.new_case.value,
        total_case:this.addForm.total_case.value,
        total_death:this.addForm.total_death.value
    })
    const isOnTheList = items.includes(newData.country);

    if (isOnTheList) {
        this.setState(({
            message: 'This country details are already added.'
        }))
    } else {
        this.setState({
            items: [...this.state.items, newData()],
        })
    }
    this.addForm.reset();
}




render() {
    const {items, message}=this.state;
    return (
        <div>
            <div>
            
                <div>
                    <form ref={input => this.addForm = input} onSubmit={(e) => {
                        this.addData(e)
                    }}>
         
                            <label>User Email :</label><br/>
                            <input required ref={input => this.newData["email"] = input} name="email" value={this.state.items.email}
                                   type="email"
                                   placeholder="Enter email"/><br></br>

                           
                                <label>Country :</label><br/>
                                <input required ref={input => this.newData["country"] = input} name="country" value={this.state.items.country}
                                       type="text"
                                       placeholder="Enter country"/><br></br>
                           

                            
                                <label>New Cases :</label><br/>
                                <input required ref={input => this.newData["new_case"] = input}
                                name="new_case"
                                       value={this.state.items.new_case} type="text"
                                       placeholder="Enter no of new cases"/><br></br>
                           

                           
                                <label>Total cases :</label><br/>
                                <input required ref={input => this.newData["total_case"] = input}
                                name="total_case"
                                       value={this.state.items.total_case} type="text"
                                       placeholder="Enter no of total cases"/><br></br>
                           

                           
                                <label>Total death :</label><br/>
                                <input required ref={input => this.newData["total_death"] = input}
                                name="total_death"
                                       value={this.state.items.total_death} type="text"
                                       placeholder="Enter no of total deaths"/><br></br>
                            

                            <button variant="primary" type="submit">
                                Submit</button><br></br>
                       
                    </form>

                </div>
                <div>
                    
                   
                    {
                        message !== '' && <p>{this.setState.message}</p>
                    }
                    <table striped="true" bordered="true" hover="true">
                        <thead>
                        <tr>
                            <th>Email</th>
                            <th>Country</th>
                            <th>New cases</th>
                            <th>Total cases</th>
                            <th>Total deaths</th>
                        </tr>
                        </thead>
                        <tbody>
                        {items.map((item,index) => {
                            return (
                                <tr key={index}>

                                    <td>{item.email}</td>
                                    <td>{item.country}</td>
                                    <td>{item.new_case}</td>
                                    <td>{item.total_case}</td>
                                    <td>{item.total_death}</td>
                                </tr>
                            )
                        })}
                        </tbody>
                    </table>
                </div>
              
            </div>
        </div>
    )
}}export default CustomDetails;

沙盒中的输出 -->

在 IDE 中运行时的错误 -->

标签： javascriptreactjstypeerrorcodesandbox

解决方案

在这种情况下使用 React refs 确实没有意义，因为您可以轻松地从表单的onSubmit事件对象中访问字段值。

初始状态应该是一个空数组。
```
this.state = {
  items: [],
};
```
绑定到它的类的addData回调需求this。

addData应该从onSubmit事件对象访问表单字段值。newData应该是要推送到items状态数组的表单字段值的对象。使用功能状态更新从之前的状态进行更新。在为现有条目搜索items数组时，您需要使用允许检查对象属性的数组函数Array.prototype.includes实际上只检查引用相等性，您希望搜索具有匹配country属性的项目，Array.prototype.some用于返回布尔值。

addData = (e) => {
  e.preventDefault();
  const { items } = this.state;

  const newData = {
    email: e.target.email.value,
    country: e.target.country.value,
    new_case: e.target.new_case.value,
    total_case: e.target.total_case.value,
    total_death: e.target.total_death.value
  };

  const isOnTheList = items.some(item => item.country === newData.country);

  if (isOnTheList) {
    this.setState({
      message: "This country details are already added."
    });
  } else {
    this.setState((prevState) => ({
      items: [...prevState.items, newData]
    }));
  }
  e.target.reset();
};

由于您的输入不受控制，因此您应该删除旧的“遗留”样式参考附件和value道具。例子：
```
<input
  required
  name="email"
  type="email"
  placeholder="Enter email"
/>
```
您在尝试呈现错误消息时有一个错字{message !== "" && <p>{this.setState.message}</p>}，应该是{message !== "" && <p>{this.state.message}</p>}.

演示

完整代码：

class CustomDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      message: ""
    };
  }

  addData = (e) => {
    e.preventDefault();
    const { items } = this.state;

    const newData = {
      email: e.target.email.value,
      country: e.target.country.value,
      new_case: e.target.new_case.value,
      total_case: e.target.total_case.value,
      total_death: e.target.total_death.value
    };
    const isOnTheList = items.includes(newData.country);

    if (isOnTheList) {
      this.setState({
        message: "This country details are already added."
      });
    } else {
      this.setState((prevState) => ({
        items: [...prevState.items, newData]
      }));
    }
    e.target.reset();
  };

  render() {
    const { items, message } = this.state;
    return (
      <div>
        <div>
          <div>
            <form onSubmit={this.addData}>
              <label>User Email :</label>
              <br />
              <input
                required
                name="email"
                type="email"
                placeholder="Enter email"
              />
              <br></br>

              <label>Country :</label>
              <br />
              <input
                required
                name="country"
                type="text"
                placeholder="Enter country"
              />
              <br></br>

              <label>New Cases :</label>
              <br />
              <input
                required
                name="new_case"
                type="text"
                placeholder="Enter no of new cases"
              />
              <br></br>

              <label>Total cases :</label>
              <br />
              <input
                required
                name="total_case"
                type="text"
                placeholder="Enter no of total cases"
              />
              <br></br>

              <label>Total death :</label>
              <br />
              <input
                required
                name="total_death"
                type="text"
                placeholder="Enter no of total deaths"
              />
              <br></br>

              <button variant="primary" type="submit">
                Submit
              </button>
              <br></br>
            </form>
          </div>
          <div>
            {message !== "" && <p>{this.state.message}</p>}
            <table striped="true" bordered="true" hover="true">
              <thead>
                <tr>
                  <th>Email</th>
                  <th>Country</th>
                  <th>New cases</th>
                  <th>Total cases</th>
                  <th>Total deaths</th>
                </tr>
              </thead>
              <tbody>
                {items.map((item, index) => {
                  return (
                    <tr key={index}>
                      <td>{item.email}</td>
                      <td>{item.country}</td>
                      <td>{item.new_case}</td>
                      <td>{item.total_case}</td>
                      <td>{item.total_death}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }
}

javascript - 代码在 codeSandbox 中运行良好，但在 IDE 中显示错误为“无法定义属性“电子邮件”：对象不可扩展”

问题描述

解决方案

演示

推荐阅读