更改反應 state 和條件渲染時，得到：錯誤：文本字符串必須在<text>零件</text>

Question

我收到此錯誤： Error: Text strings must be rendered within a <Text> component. 當我更新 state 時，這是一個包含組件的列表。 我正在嘗試添加一個組件，所以我不明白為什么我需要一個<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"}

這就是我的回報聲明。 抽屜的 rest 負載正常。

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>

如果您的列表是 state 聲明中所說的數組，則 map 它並分別呈現每個文本。 當然它可能是一個對象數組，在這種情況下你需要使用正確的鍵。

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

此外，嘗試注釋掉這些行並添加模擬值以查看結果並檢查它是否符合您的預期。