[英]Error: Text strings must be rendered within a <Text> component in React Native when string is not empty
[英]When changing react state and conditional rendering, getting: Error: Text strings must be rendered within a <Text> component
我收到此错误: 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>
);
在本节中,您似乎正在尝试将列表直接呈现到 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>)}
此外,尝试注释掉这些行并添加模拟值以查看结果并检查它是否符合您的预期。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.