javascript - 代码在 codeSandbox 中运行良好，但在 IDE 中执行时显示错误 "can' t define property "email": Object is not extensible"

Question

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

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

这是沙箱的链接=> Link for the code in sandbox

如果沙箱不工作，代码会自动生成 ==>

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中运行时出错-->

Answer 1

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

1. 初始状态应该是一个空数组。

   this.state = {
     items: [],
   };
   

2. addData回调需求this绑定(bind)到它的类。

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

   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();
   };
   

4. 由于您有不受控制的输入，您应该删除旧的“遗留”样式引用附件和 value支柱。示例:

   <input
     required
     name="email"
     type="email"
     placeholder="Enter email"
   />
   

5. 您在尝试呈现错误消息时输入错误，{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>
    );
  }
}