So I'm building a DnD app for character sheet management, where it displays the skills and whatnot.
In it I have a class(AbiltityClass) that stores a map of other classes(SkillClass) inside of a variable(_aSkills).
export default class AbilityClass {
constructor(name, aVal, aMod) {
this._abilityName = name; // string
this._abilityVal = aVal; // int
this._abilityMod = aMod; // int
this._aSkills = new Map(); // map of SkillClass objects
}
}
export default class SkillClass {
constructor(name, prof, mod, bonus){
this._nameSkill = name; // string
this._profSkill = prof; // bool
this._modBonus = bonus; // int
this._modSkill = this.evalMod(mod); // int
}
evalMod(mod) {
return mod + this._modBonus;
}
}
The _aSkills variable was originally an Array of SkillClasses, but due to ease-of-accessing, I decided that a Map would be better.
I have a process that will basically iterate through each element in _aSkills and create components out of them through the skillFactory and buildSkill functions which should be placed in the brackets where the skillFactory function is called.
const AbilityContainer = (props) => {
const buildSkill = (value, key) => {
return(
<SkillSet
key={Math.random()}
skillName={key}
prof={value._profSkill}
skillVal={value._modSkill}
setProf={()=>{}}
/>
);
}
const skillFactory = () => {
return(props.ability._aSkills.forEach(buildSkill));
}
return(
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.header_text}>
{props.ability._abilityName}
</Text>
</View>
<View style={styles.statBox}>
<View style={styles.ability}>
<StackedHex isAbility={true} lowerVal={props.ability._abilityVal}/>
</View>
<View style={styles.skills}>
{skillFactory()} // =================> The function call in question
</View>
</View>
</View>
);
};
My issue is that either skillFactory or buildSkill is not returning the SkillSet component.
I've used some print logs and I've verified that buildSkill is receiving the correct data, but something isn't working. I don't get any errors or warnings, and the place where the SkillSet components should be is just empty.
As I said, I changed the _aSkills variable from an Array to a Map recently, and it was working as an Array. This is the format of my previous code:
const AbilityContainer = (props) => {
const buildSkill = (skill) => {
return(
<SkillSet
key = {Math.random()}
prof={skill._profSkill}
setProf={skill._profFunc}
skillName={skill._nameSkill}
skillVal={skill._modSkill}
/>
);
}
const skillFactory = () => {
return (props.ability._aSkills.map(x => buildSkill(x)));
}
return(
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.header_text}>
{props.ability._abilityName}
</Text>
</View>
<View style={styles.statBox}>
<View style={styles.ability}>
<StackedHex isAbility={true} lowerVal={props.ability._abilityVal}/>
</View>
<View style={styles.skills}>
<SkillSet
prof={props.ability._saveProf}
setProf={props.ability._saveProfFunc}
skillName={'Save'}
skillVal={props.ability._saveMod}
/>
{skillFactory()}
</View>
</View>
</View>
);
};
I'm using Android Studio for this build and I'm still relatively new to react-native. I triple-checked all my other components and their stylesheets to make sure they weren't interfering, so I know it has something to do with the AbilityContainer.
I've read up on the forEach function for Maps and as far as I can tell, I'm doing it right, but I feel like there is something that forEach is doing that I don't understand in terms of how it returns things.
Does anyone have any idea what the issue could be?
Thanks in advance.
forEach does something for each element, but doesn't return anything (even if you return in the callback, that's just returning from the cb, not the equivalent of returning from a .map) which is why that version isn't working. If you convert it back to an array ([...props.ability._aSkills].map...) this will give you an array of arrays ([key, value]) from your Map. You could also use a for..of loop over _aSkills.entries().
So now knowing that forEach doesn't return anything, I just added a variable and gave my buildSkill function something to return to.
Here's what I did:
const AbilityContainer = (props) => {
let skills = new Array();
const buildSkill = (value, key) => {
skills.push(<SkillSet
key={Math.random()}
skillName={key}
prof={value._profSkill}
skillVal={value._modSkill}
setProf={()=>{}}
/>);
}
const skillFactory = () => {
props.ability._aSkills.forEach(buildSkill);
return(skills);
}
...
};
Related
I'm using React Native (0.68) and Firebase RTDB (with the SDK, version 9), in Expo.
I have a screen that needs to pull a bunch of data from the RTDB and display it in a Flatlist.
(I initially did this without Flatlist, but initial rendering was a bit on the slow side.)
With Flatlist, initial rendering is super fast, huzzah!
However, I have an infinite loop re-render that I'm having trouble finding and fixing. Here's my code for the screen, which exists within a stack navigator:
export function GroupingsScreen () {
... set up a whole bunch of useState, database references (incl groupsRef) etc ...
onValue(groupsRef, (snapshot) => {
console.log('groups onValue triggered')
let data = snapshot.val();
if (loaded == false) {
console.log('--start processing')
setLoaded(true);
let newObject = []
for (let [thisgrouping, contents] of Object.entries(data)) {
let onegroupingObject = { title: thisgrouping, data: [] }
for (let [name, innerdata] of Object.entries(contents.ingredients)) {
onegroupingObject.data.push({ name: name, sku: innerdata.sku, size: innerdata.size,
quantity: innerdata.quantity,
parent: thisgrouping
})
}
newObject.push(onegroupingObject)
}
console.log('--done processing')
setGroupsArray(newObject)
}
});
.... more stuff excerpted ....
return (
<View style={styles.tile}>
<SectionList
sections={groupsArray}
getItemLayout={getItemLayout}
renderItem={ oneRender }
renderSectionHeader={oneSection}
initialNumToRender={20}
removeClippedSubviews={true}
/>
</View>
)};
I'm using loaded/setLoaded to reduce re-renders, but without that code, RN immediately dumps me out for excessive re-renders. Even with it, I get lots of extra renders.
So...
Can someone point me at what's triggering the rerender? The database is /not/ changing.
Is there a better way to get RTDB info into a Flatlist than the code I've written?
I have some code that actually does change the database. That's triggering a full rerender of the whole Flatlist, which is visibly, painfully slow (probably because parts are actually rendering 10x instead of once). Help?
For completeness, here's the OneItem code, so you can see just how complex my Flatlist items are:
const OneItem = (data) => {
// console.log('got data',data)
return (
<View style={[styles.rowView, { backgroundColor: data.sku?'white': '#cccccc'}]} key={data.name}>
<TouchableOpacity style={styles.nameView} onPress={() => {
navigation.navigate('AddEditItemScreen', {purpose: 'Grouping', itemname: data.name, parent: data.parent, mode: 'fix'})
}}>
<View style={styles.nameView}>
<Text style={styles.itemtext}>{data.name}</Text>
{data.sku? null: <Text>"Tap to add SKU."</Text>}
{data.size?<Text>{data.size} </Text>: <Text>no size</Text>}
</View>
</TouchableOpacity>
<View style={styles.buttonView}>
<Button style={styles.smallButton}
onPress={() => { changeQuant(data.quantity ? data.quantity - 1 : -1, data.parent + '/ingredients/' + data.name) }}
>
{data.quantity > 0 ? <Text style={[styles.buttonText, { fontSize: 20 }]}>-</Text>
:<Image source={Images.trash} style={styles.trashButton} />}</Button>
<Text style={styles.quantitytext}>{data.quantity}</Text>
<Button style={styles.smallButton}
onPress={() => {
changeQuant(data.quantity? data.quantity +1 : 1, data.parent+'/ingredients/'+data.name)}}>
<Text style={[styles.buttonText, {fontSize: 20}]}>+</Text></Button>
</View>
</View>
)
};```
I worked out how to stop the rerender (question #1). So, within my Screen functional component, I needed to make another function, and attach the state hook and useEffect to that. I'm not totally sure I understand why, but it gets rid of extra renders. And it's enough to get #3 to tolerable, although perhaps not perfect.
Here's the new code:
export function GroupingsScreen () {
... lots of stuff omitted ...
function JustTheList() {
const [groupsArray, setGroupsArray] = useState([])
useEffect(() => {
const subscriber = onValue(groupsRef, (snapshot) => {
console.log('groups onValue triggered')
let data = snapshot.val();
let newObject = []
for (let [thisgrouping, contents] of Object.entries(data)) {
let onegroupingObject = { title: thisgrouping, data: [] }
for (let [name, innerdata] of Object.entries(contents.ingredients)) {
onegroupingObject.data.push({ name: name, sku: innerdata.sku, size: innerdata.size,
quantity: innerdata.quantity,
parent: thisgrouping
})
}
newObject.push(onegroupingObject)
}
setGroupsArray(newObject)
})
return () => subscriber();
}, [])
return(
<View style={styles.tile}>
<SectionList
sections={groupsArray}
getItemLayout={getItemLayout}
renderItem={ oneRender }
renderSectionHeader={oneSection}
initialNumToRender={20}
removeClippedSubviews={true}
/>
</View>
)
}
And then what was my return within the main functional screen component became:
return (
<JustTheList />
)
I'm still very interested in ideas for improving this code - am I missing a better way to work with RTDB and Flatlist?
I've got a useState variable that has an array of JSON objects, and I'm trying to get the text fields to dynamically render and update with onChangeText, but I'm having a bit of an issue with this.
When I add console.log(index) to updateHashtags, it says it is undefined, and I can't understand what I'm doing wrong or can do to make this work. In theory, the index should be a static number for each text field. So the first text field would have hashtags[0] as its value and use '0' as the index for updating the state of hashtags.
When I use:
console.log('index',index);
inside of updateHashtags, I get:
index undefined
Here's the code:
const updateHashtags = (text, index) => {
let ht = hashtags;
ht[index].name = text;
setHashtags(ht);
}
const hashtagElement = (
<>
<Text style={styles.plainText} >Set Your Values:</Text>
<Text style={styles.instructionsText} >This is what other users use to search for you.</Text>
{hashtags.map((e,index) =>
<TextInput
placeholder='value'
key={e.name + index}
value={hashtags[index].name}
onChangeText={(text,index) => updateHashtags(text,index)}
style={styles.textInput}
/>
)}
<TouchableOpacity
onPress={() => {
let ht = hashtags;
let newht = {
name: '',
weight: 0,
};
ht[ht.length] = newht;
setHashtags(ht);
}}
>
<Ionicons
name="add-circle-outline"
size={40}
color={'black'}
/>
</TouchableOpacity>
</>
);
Maybe the onChangeText functions doens't get index param.
Try it like this:
// we are getting index from here
{hashtags.map((e,index) =>
<TextInput
placeholder='value'
key={e.name + index}
value={hashtags[index].name}
// so no need of taking index from param here
onChangeText={(text) => updateHashtags(text,index)}
style={styles.textInput}
/>
)}
Also for your updateHashTags functions consider this insted:
const updateHashtags = (text, index) => {
// doing it this way ensures your are editing updated version of state
setHashtags((state) => {
let ht = state;
ht[index].name = text;
return ht;
});
}
I have the following code,
I need to use a variable that is coming after a hook is set, how to use that in my render?
const LoanDetailCard = () => {
const loan = first(loanData?.loans); //var set from hook
let interestRateOutter;
let transactionalBalanceOutter;
if (loan) {
//set the outer variables with loanData???
const {interestRate, transactionalBalance} = loan
interestRateOutter = interestRate
transactionalBalanceOutter = transactionalBalance
}
return (
<View style={styles.container}> ...
//now use interesRateOutter ??
OR
is the best approach just to check on the render elements?
<Text style={styles.textWhite} accessibilityLabel="Interest rate">
{loan ? loan.interestRate : ""}
</Text>
You don't need any temporary variables in your render loop. Instead I would write it simply like:
const LoanDetailCard = (loanData) => {
const { interestRate, transactionalBalance } = first(loanData);
return <View style={styles.container}>
<Text style={styles.textWhite} accessibilityLabel="Interest rate">
{interestRate ?? ""}
</Text>
</View>;
};
Hi I'm wondering why this code works,
Sorry for the sintax errors, this is an Example. My question is why memberIpAssignments is taking ip value?. I don't get it if I'm no passing ip into setMemberIpAssignments(arr =>[...arr]) but still takes that's value and updating the state.
setMemberIpAssignments(arr =>[...arr]), this state shouldn't change at all, because I'm no giving ip value. But it does change taking ip value.
if someone can explain to me I'll be grateful.
I'm new at react-native
export const zeroTierNetworkMembersUpdateScreen = ({ route }) => {
const { ipAssignments } = ["192.168.0.1","192.168.1.1"];
const [memberIpAssignments, setMemberIpAssignments] =(ipAssignments);
return (
<View style={styles.viewSet}>
{memberIpAssignments.map((eachIpAssignments, index) => {
return (
<Input
key={index}
placeholder={"ipAssignments"}
keyboardType={"default"}
value={eachIpAssignments}
onChangeText={(value) => {
var ip = ipAssignments;
ip[index] = value;
setMemberIpAssignments(arr =>[...arr]);
}}
/>
);
})}
</View>
);
};
I think I've confirmed my suspicions that you are in fact mutating an object reference that you've stored in local component state.
export const zeroTierNetworkMembersUpdateScreen = ({ route }) => {
// (1) ipAssignments array reference
const ipAssignments = ["192.168.0.1", "192.168.1.1"];
// (2) memberIpAssignments references ipAssignments
const [memberIpAssignments, setMemberIpAssignments] = useState(ipAssignments);
return (
<View style={styles.viewSet}>
{memberIpAssignments.map((eachIpAssignments, index) => {
return (
<Input
key={index}
placeholder={"ipAssignments"}
keyboardType={"default"}
value={eachIpAssignments} // (3) value from memberIpAssignments
onChangeText={(value) => {
// (4) ip references ipAssignments & memberIpAssignments
var ip = ipAssignments;
// (5) element mutation!!
ip[index] = value;
// (6) state update to trigger rerender
setMemberIpAssignments(arr => [...arr]);
}}
/>
);
})}
</View>
);
};
As far as I can tell the mutation happens exactly once since initially everything is reference the original ipAssignments array. Upon updating state though, arr => [...arr] is returning a new array reference for memberIpAssignments the references back to ipAssignments is broken.
You should really be using a functional state update to "edit" the ip entry any way. Consider the following:
export default function App() {
const ipAssignments = ['192.168.0.1', '192.168.1.1'];
const [memberIpAssignments, setMemberIpAssignments] = React.useState(
ipAssignments
);
return (
<View>
{memberIpAssignments.map((eachIpAssignments, index) => {
return (
<TextInput
key={index}
placeholder={'ipAssignments'}
keyboardType={'default'}
value={eachIpAssignments}
onChangeText={(value) => {
setMemberIpAssignments((arr) =>
arr.map((el, i) => (i === index ? value : el))
);
}}
/>
);
})}
</View>
);
}
Expo Snack
My problem is probably very basic, but im new to programming.
Basically I want to see a flatlist with for each category the title and the img
This is my category constructor:
class Category{
constructor(id, title, catImg){
this.id = id;
this.title = title;
this.catImg = catImg;
}
}
these are my 3 categories:
export const CATEGORIES = [
new Category('c1', 'Studeren', require('../assets/studeren.png')),
new Category('c2', 'Wonen', require('../assets/wonen.png')),
new Category('c3', 'EersteVoertuig', require('../assets/voertuig.png'))
];
this is where I want to call the elements:
const CategoryGridTile = props => {
return(
<TouchableOpacity style = {styles.gridItem} onPress = {props.onSelect}>
<View >
<Text>{props.title}</Text>
</View>
<Image source ={props.catImg} style={{width: 150, height: 150}}/>
</TouchableOpacity>
);
};
It does work for the props.title part, but it doesnt for the props.catImg part
(Meaning I can see the title, but no image. I have tried to directly put the img path instead of props.catImg, and that works, but thats not how I want to do it)
EDIT: I figured this code is also needed to understand my mistake?
const CategoryScreen = props => {
const renderGridItem = (itemData) => {
return <CategotyGridTile
title ={itemData.item.title}
onSelect={() =>{
props.navigation.navigate({
routeName: 'CategorieVragen',
params: {
categoryId: itemData.item.id
}});
}}/>;
};
return(
<FlatList
data={CATEGORIES}
renderItem ={renderGridItem}
numColums = {2}
/>
)
}
you have to send CATEGORIES as props to CategotyGridTile
in CategoryScreen
return <CategotyGridTile
categories={CATEGORIES}
{...props}
/>
in CategoryGridTile
<Image source ={props.categories.catImg} style={{width: 150, height: 150}}/>