Question

我正在开发本机应用程序，我有一个名为用户

的数组

Array [
  Object {
    "occurrences": 42,
    "username": "teste0",
  },
  Object {
    "occurrences": 1,
    "username": "teste2",
  },
  Object {
    "occurrences": 5,
    "username": "teste1",
  },
  Object {
    "occurrences": 0,
    "username": "teste 3",
  },
]

当我尝试将每个用户名放在单独的视图中

async function setUsersView() {
    let users;

    try {
      users = await listUserOcurrences(token);
    } catch (e) {
      console.log(e);
    }

    return users?.map((user) => {
      return (
        <View style={styles.userView}>
          <Text style={{ fontSize: 20 }}>
            {"\n"} {users.username}
          </Text>
        </View>
      );
    });
  }

我收到以下错误错误：对象作为React子对象无效

Answer 1

users.username，这里应该是user.username，map的回调使用参数user而不是users

Answer 2

这是因为您的setUsersView()是async函数，对渲染无效。函数应为纯函数，以呈现某些视图。所以你可以这样：

首先创建一个状态变量，以检查是否提取了用户，例如：

const [isLoadingUsers, setLoadingUserStatus] = useState(false); // functional component

// class component
this.state = {
  isLoadingUsers: false
}

现在，当您开始获取用户时，将其状态切换为true并根据其值呈现视图。例如，如果用户正在抓取，则可以渲染ActivityIndicator或某个占位符，并且抓取完成后将显示用户。

function setUsersView() {
  setLoadingUserStatus(true);
  let users;
  try {
    users = await listUserOcurrences(token);
    setLoadingUserStatus(false);
  } catch (e) {
    console.log(e);
  }

  if (isLoadingUsers) {
    return (
      <View style={styles.userView}>
        <ActivityIndicator animating={true}/>
      </View>
    )
  }
  return users?.map((user) => {
    return (
      <View style={styles.userView}>
        <Text style={{ fontSize: 20 }}>
          {"\n"} {users.username}
        </Text>
      </View>
    );
  });
}

现在，这是简单的功能，错误将消失。

错误：对象在react native中作为React子对象无效

2 个答案: