JSX array.map 未定義的布爾數據

Question

我試圖在表格行中顯示和映射我的對象，但我的布爾數據將返回為未定義，我什至無法將它們轉換為字符串，解決方案是什么？

在映射中查看 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)

Answer 1

有兩個問題。

1. 在您提供的示例用戶對象中，它可以使用小寫字母isenable 。 但是，您正在嘗試引用isEnable
2. 您的某些isenable字段為null 。 這沒有 toString 方法

由於 null 是假的，您可以將其短路。

這是一個例子

Answer 2

在數據中，您收到的isenable都是小寫的，但在代碼中，您將它用作isEnable ，javascript 變量名稱區分大小寫，因此引擎將它們視為兩種不同的東西。

將代碼更改為user.isenable ，它應該可以工作