Question

我的程序加载了一个用户列表（带有jsonplaceholder数据），并且我试图使此数据可编辑，但是给出了错误：

TypeError：无法读取未定义的属性“ street”

有人可以帮忙吗？

class Users extends React.Component {
  constructor(){
    super();
    this.state = {
      users: [],
      displayList: 'block',
      displayForm: 'none',
      edit: false,

      userEdit: {
        id: null,
        name: "",
        email: "",
        address: {
          street: "",
          suite: "",
          city: "",
          zipcode: ""
        },
        phone: ""
      }
    }
    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount(){
    this.getUsersList();
  }

  getUsersList(){ ... }

  getUserEdit(){ ... }

  handleClick(id){ ... }

我很难在handleChange函数中编写代码，可能也可能是错误的

handleChange(event){
    const {name, value} = event.target
    this.setState({
      userEdit:{
        [name]: value
      }
    })
  }

  render(){
    if (this.state.edit === false) {
      return (
        <UsersList
          users = {this.state.users}
          displayList = {this.state.displayList}
          handleClick = {this.handleClick}
        />
      );
    }

    else {
      this.getUserEdit();
      return(
        <UserEdit
          user = {this.state.userEdit}
          displayForm = {this.state.displayForm}
          handleChange = {this.handleChange}
          handleClick = {this.handleClick}
        />
      )
    }
  }
}

内部UserEdit.js

function UserEdit(props){
  return(
    <ul>
      <div style={{display: props.displayForm.form}} key={props.user.id}>
        <form>
          <h2>{props.user.name} </h2>
          <p>Email:
            <input
              type="text"
              name="email"
              value = {props.user.email}
              className="form-control"
              onChange={(event) => props.handleChange(event)}
            />
          </p>
          <p>Address: </p>
          <ul>
            <li>Street:
              <input
                type="text"
                name="street"
                value = {props.user.address.street}
                className="form-control"
                onChange={(event) => props.handleChange(event)}
              />
            </li>
            <li>Suite:
              <input
                type="text"
                name="suite"
                value = {props.user.address.suite}
                className="form-control"
                onChange={(event) => props.handleChange(event)}
              />
            </li>
            <li>City:
              <input
                type="text"
                name="city"
                value = {props.user.address.city}
                className="form-control"
                onChange={(event) => props.handleChange(event)}
              />
            </li>
            <li>ZipCode:
              <input
                type="text"
                name="zipcode"
                value = {props.user.address.zipcode}
                className="form-control"
                onChange={(event) => props.handleChange(event)}
              />
            </li>
          </ul>
          <p>Phone:
            <input
              type="text"
              name="phone"
              value = {props.user.phone}
              className="form-control"
              onChange={(event) => props.handleChange(event)}
            />
          </p>
        </form>
        <button onClick={() => props.handleClick()}> Save </button>
        <hr></hr>
        </div>
    </ul>
  )
}

Answer 1

发生错误是因为props.user.address是undefined，而您尝试访问props.user.address.street。

使用前应进行哪些检查。

value={props.user.address ? props.user.address.street : ''}

您应该在有props.user.address.something的其他地方这样做。

Answer 2

您需要检查address是否包含street。同样，您还应该检查user是否包含address。

一次班轮检查可能是：

value = { props.user && props.user.address && props.user.address.street ? props.user.address.street : '' }

TypeError：无法读取未定义的属性“ street”

2 个答案: