繁体   English   中英

JSX array.map 未定义的布尔数据

[英]JSX array.map undefined boolean data

我试图在表格行中显示和映射我的对象,但我的布尔数据将返回为未定义,我什至无法将它们转换为字符串,解决方案是什么?

在映射中查看 user.isenable 和 user.isonline ...

这是我试过的...

import { component, Fragment } from 'react'

class Users extends Component {
  constructor(props) {
    super(props);

    this.state = {
      users: []
    };
  }
  componentDidMount() {
    const url = "http://localhost:4000/api/user";
    // AXIOS REQUEST
    axios.get(url).then(res => {
      this.setState({ users: res.data });
      console.log(this.state.users);
    });
  }

  render() {
    const users = this.state;
    console.log(this.state.users.isenbale);
    return (
      <table id="users">
        <tr>
          <th>is Enable</th>
          <th>is Online</th>
        </tr>

        {this.state.users.map(user => {
          return (
            <tr key={user.nationalcode}>
              <td>{user.isEnable.toString()}</td>
              <td>{user.isOnline.toString()}</td>
            </tr>
          );
        })}
      </table>
    );
  }
}

res.data & this.state.users控制台日志是一样的。

(5) [{…}, {…}, {…}, {…}, {…}]
0: {nationalcode: 134556778, stockcode: "md3456", firstname: "ali", lastname: "khodabakhashi", isenable: true, …}
1: {nationalcode: 1334853905, stockcode: "md4f5789", firstname: "saeed", lastname: "mohammad", isenable: true, …}
2: {nationalcode: 11313, stockcode: "31313", firstname: "1313", lastname: "1313", isenable: null, …}
3: {nationalcode: 4151515, stockcode: "151", firstname: "5131", lastname: "3114", isenable: null, …}
4: {nationalcode: 123456789, stockcode: "3131", firstname: "31", lastname: "3131", isenable: null, …}
length: 5
__proto__: Array(0)

有两个问题。

  1. 在您提供的示例用户对象中,它可以使用小写字母isenable 但是,您正在尝试引用isEnable
  2. 您的某些isenable字段为null 这没有 toString 方法

由于 null 是假的,您可以将其短路。

是一个例子

在数据中,您收到的isenable都是小写的,但在代码中,您将它用作isEnable ,javascript 变量名称区分大小写,因此引擎将它们视为两种不同的东西。

将代码更改为user.isenable ,它应该可以工作

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM