更改反应状态和条件渲染时，得到：错误：文本字符串必须在 <Text> 组件内渲染

Question

我在更新状态时收到此错误：Error: Text strings must be rendered within a <Text> component.，这是一个包含组件的列表。我正在尝试添加一个组件，所以我不明白为什么我需要一个 <Text> 组件。此列表用于呈现抽屉组件，允许用户查看他们所属的俱乐部的页面。

  const [public_list, setPublicList] = useState([]);
  const [private_list, setPrivateList] = useState([]);
  const [list, setList] = useState([]);

  const homeIcon = <Icon name="home-outline" color={'black'} size={20} />;

  var user_doc;

  async function fetchData() {
    user_doc = await firestore()
      .collection('users')
      .doc(auth_user.uid)
      .get()
      .catch(function (error) {
        console.log(
          'There has been a problem with your fetch operation: ' +
            error.message,
        );
      });

    const userData = user_doc['_data'];

    let public_clubList = userData['public_clubs'];
    console.log(user_doc['public_clubs']);

    for (let item = 0; item < public_clubList.length; item++) {
      let name = public_clubList[item]['clubName'];

      const newList = list.concat('hey');

      const newPublicList = public_list.concat(
        <DrawerItem
          icon={({color, size}) => homeIcon}
          label={toString(name)}
          onPress={() => {
            props.navigation.navigate('ClubPage', {hello});
          }}
        />,
      );

      setList(newList);
      setPublicList(newPublicList);

      console.log(name);
    }
    console.log(user_doc['public_clubs'][1]['clubName']);
  }

错误发生在setList(newList)。我在此期间致电fetchData：

useEffect(() => {
    if (list.length == 0) {
      fetchData();
    }
  });

如果您想知道，这就是我的 userData：

{"email": "johndoe@email.com", "fullName": "John Doe", "id": "JbuhzofKDEe2ImMl9DPYpBbuVzG2", "private_clubs": [{"clubName": "Kool kids ", "id": "1903440d-e06a-4117-bc41-d27fabb80583"}, {"clubName ": "Test", "id": "53fe982f-318e-4903-a439-9e8271035393"}], "public_clubs": [{"clubName": "Testing adding users n stuff", "id": "a6cb1dcb-cfdd-48a4-b673-671519fbe6dd"}, {"clubName": "Hey guyyys", "id": "c219a611-26c3-44d3-9d66-396b0f9a738d"}], "userName": "johndoe"}

这就是我的退货声明。其余的抽屉加载正常。

return (
    <View style={{flex: 1, flexDirection: 'column'}}>
      <DrawerContentScrollView {...props} style={{flex: 10}}>
        <DrawerItem
          icon={({color, size}) => (
            <Icon name="home-outline" color={'black'} size={20} />
          )}
          label={hello}
          onPress={() => {
            props.navigation.navigate('ClubPage', {hello});
          }}
        />
        {list}
        {public_list}
        {private_list}
      </DrawerContentScrollView>
      <Drawer.Section style={{flex: 1}}>
        <DrawerItem
          icon={({color, size}) => (
            <Icon name="buffer" color={'black'} size={20} />
          )}
          label="FeedPage"
          onPress={() => {
            props.navigation.navigate('FeedPage');
          }}
        />
      </Drawer.Section>
      <DrawerItem
        icon={({color, size}) => (
          <Icon name="pen-plus" color={'black'} size={20} />
        )}
        label="Make a Club"
        onPress={() => {
          props.navigation.navigate('MakeClub');
        }}
      />
      <DrawerItem
        icon={({color, size}) => (
          <Icon name="account" color={'black'} size={20} />
        )}
        label="My Profile"
        onPress={() => {
          props.navigation.navigate('ProfilePage');
        }}
      />
    </View>
  );

Answer 1

在本节中，您似乎正在尝试将列表直接呈现到 jsx 上：

 <DrawerContentScrollView {...props} style={{flex: 10}}>
        <DrawerItem
          icon={({color, size}) => (
            <Icon name="home-outline" color={'black'} size={20} />
          )}
          label={hello}
          onPress={() => {
            props.navigation.navigate('ClubPage', {hello});
          }}
        />
        {list} // Here
        {public_list} //Here
        {private_list} //Here
      </DrawerContentScrollView>

如果您的列表是状态声明中所说的数组，请将其映射并分别呈现每个文本。当然它可以是一个对象数组，在这种情况下你需要使用正确的键。

{list.map(item => <Text> {item} </Text>)}

另外，尝试注释掉这些行并添加模拟值以查看结果并检查它是否符合您的预期。