I am trying to add dynamically components to View with hooks in React Native this way:
const AssetDetailScreen = (props) => {
const [details, setDetails] = React.useState('');
React.useEffect(() => {
getAssetDetailData()
});
getAssetDetailData = () => {
assetDetailPromise().then((data) => {
setDetails(data)
}).catch((error) => {
...
});
}
assetItems = details.map((item) => {
return(
<Text>{item.label}</Text>
)
})
return (
<View>
{assetItems}
</View>
)
}
But I get this error:
TypeError: undefined is not a function (near '... details.map...')
How can I solve this issue?
Is there any workaround?
I solved this issue by replacing this line:
const [details, setDetails] = React.useState('');
with this:
const [details, setDetails] = React.useState([]);
Related
I need to pass one value from firestore to application context. I don't know where am I going wrong? Has anyone had a similar problem? I searched the website but couldn't find anything similar.
export const AuthProvider = ({children}) => {
const [user, setUser] = useState();
const [contextWeight, setContextWeight] = useState();
}
return (
<AuthContext.Provider
value={{
user,
setUser,
contextWeight,
setContextWeight,
unit: async () => {
await firestore()
.collection('users')
.doc(auth().currentUser.uid)
.collection('products')
.doc('product')
.get()
.then(( documentSnapshot ) => {
if( documentSnapshot.exists ) {
setContextWeight(documentSnapshot.data().weightUnit);
}
}).catch(error => {
console.log(error);
})
}}>
{children}
</AuthContext.Provider>
);
I'M trying to use Weather API with React Native, but the error below occurred.
It seems that a problem is that const is used before getAdressData done.
How can I use const in this case and fix this error?
Error
undefined is not an object (evaluating 'whether.sys.sunrise')
Codes
〜〜〜〜〜〜〜〜〜〜
export const AddressScreen = () => {
const [address, setAddress] = useState('');
const baseURL = `${APIKey}`
const getAddressData = () => {
axios.get(baseURL)
.then((response) => {setAddress(response.data)})
.catch(error => console.log(error))
};
const sunrise = new Date(weather.sys.sunrise * 1000); //Error
const sunriseTime = sunrise.toLocaleTimeString();
return (
<KeyboardAvoidingView>
〜〜〜〜〜〜〜〜
<View>
<Text>
Sunrise: {(sunriseTime)}
</Text>
</View>
</KeyboardAvoidingView>
);
The JavaScript compiler error is clear with the error. you are trying to access weather.sys.sunrise object property but not defined/initialized.
It seems that you are trying to fetch weather information of a specific location. If that is the intention of your code.
Refactor code as below :
export const AddressScreen = () => {
const [address, setAddress] = useState(null);
const baseURL = `${APIKey}`;
console.log("Fetched weather data:",address)
const getAddressData = () => {
axios
.get(baseURL)
.then((response) => {
console.log("Server response:",response)
setAddress(response.data);
})
.catch((error) => console.log(error));
};
useEffect(() => {
getAddressData();
}, []);
// Don't access weather data until fetched and assigned to state value.
if (!address?.sys) return null;
const sunrise = new Date(address.sys.sunrise * 1000);
const sunriseTime = sunrise.toLocaleTimeString();
return (
<KeyboardAvoidingView>
<View>
<Text>Sunrise: {sunriseTime}</Text>
</View>
</KeyboardAvoidingView>
);
};
This is my code:
export default function App() {
const [onProcess, setOnProcess] = useState("normal")
var myid = "123"
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.npoint.io/0294bea2185268c9ac70')
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => console.log('ERR :', error))
},[]);
for (let x in data) {
if (data[x].client_id == myid) {
var set = data[x].situation
setOnProcess(set)
console.log(data[x].situation)
break
}
}
const rt_normal = (
<View style={styles.container}>
<Text> This is normal view </Text>
</View>
)
const rt_process = (
<View style={styles.container}>
<Text> This is process view </Text>
</View>
)
if (onProcess == "normal") {
return rt_normal
}
else if (onProcess == "_on_process") {
return rt_process
}
}
The error I got is:
:[Render Error. Too many re-renders. React limits the number of renders to prevent an infinite loop.]
This happens because of setOnProcess(set) code. How can I solve this?
You should remove your for...in loop and refactor to utilise useEffect.
useEffect(() => {
// Get a specific entry where client_id matches myId.
const filteredItem = data.find(item => item.client_id === myId);
// Perform a check as .find() can return undefined.
if(filteredItem.situation) {
setSituation(filteredItem.situation);
}
}, [data]);
Put the for loop inside a useEffect
(Untested) example:
useEffect(() => {
for (let x in data) {
if (data[x].client_id == myid) {
var set = data[x].situation;
setOnProcess(set);
console.log(data[x].situation);
break;
}
}
}, [data]);
I am trying to pass filtered value from JSON to the parent component, however I've tried using Set but seems the output is still the same. The component that I'm using to render the JSON is picker from native-base. I want to filter out the repeated value in my picker. Greatly appreciated if anyone can help me.
enter image description here
Here's my code.
Picker.js
const DefaultPicker = ({labelItem, pickerWidth, onHandleValue, ...rest}) => {
const context = useContext(WindowContext);
const [selectedValue, setSelectedValue] = useState('-Select-');
const [data, setData] = useState([]);
const {user, setUser} = useContext(AuthContext);
function onNewData() {
if (user) {
user.getIdToken().then((idToken) => {
Axios.get('URL_ENDPOINT', {
headers: {
Authorization: 'Bearer' + idToken,
},
})
.then(({data}) => {
setData(data.features);
// console.log(data.features);
})
.catch((error) => {
console.error(error);
});
});
}
}
useEffect(() => {
const form = onNewData(onNewData);
return form;
}, []);
return (
<PickerWrapper>
<PickerItem
width={pickerWidth}
height="60"
mode="dropdown"
selectedValue={selectedValue}
onValueChange={(itemValue, itemIndex) => {
setSelectedValue({itemValue});
}}>
{Array.from(
new Set(
data.map((value, index) => (
<PickerItem.Item
key={index}
label={value.properties[labelItem]}
value={value.properties[labelItem]}
{...rest}
/>
)),
),
)}
</PickerItem>
</PickerWrapper>
);
};
And here is my parent component
SiteData.js
const SiteData = () => {
const [values, setValues] = useState([]);
const onHandleValue = (params) => {
setValues(params);
console.log(params);
};
return (
<ScrollableView>
<DetailContainer>
<DetailWrapper>
<DetailTitle>Site Data</DetailTitle>
<DetailSubtitle marginTop="10">
Insert new data found during your audit or observation session
</DetailSubtitle>
<DetailSubcontainer>
<DefaultPicker
labelItem={'category'} <-- receive value from child
pickerWidth="100%"
onHandleValue={onHandleValue}
/>
</DetailSubcontainer>
</DetailWrapper>
</DetailContainer>
</ScrollableView>
);
};
UPDATE 1:
I'm using the filter() method so i can create a new array but it returns only one value in the picker list.
const indexData = data.filter(
({category}, index) => {
return (
data.findIndex(
(item) =>
item.category === category,
) === index
);
},
);
The output
enter image description here
I fixed my code by adding this on child component
var setObj = new Set();
var result = data.reduce((acc,item)=>{
if(!setObj.has(item.category)){
setObj.add(item.category,item)
acc.push(item)
}
return acc;
},[]);
I am trying to access the object obtained from my API get request but I keep getting Array[] returned in the console.log while the items get rendered on the screen.
Can someone spot where I went wrong?
const [posts, setPosts] = useState([]);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const loadPosts = async () => {
setLoading(true);
const response = await messagesApi.getMessages();
setLoading(false);
if (refreshing) setRefreshing(false);
if (!response.ok) return setError(true);
setError(false);
setPosts(response.data);
};
useEffect(() => {
const newsocket = io.connect("http://ip:port");
loadPosts();
console.log(posts); // not working
newsocket.on("connect", (msg) => {
setSocket(newsocket);
});
return () => newsocket.close();
}, []);
return (
<FlatList
data={posts}
keyExtractor={(post) => post.id.toString()}
renderItem={({ item, index }) => (
<MessagesList
title={item.title}
onPress={() =>
navigation.navigate(routes.CHAT, { message: item, index, updateView })
}
/>
)}
/>
);
ISSUE
console.log executes before getting an API response.
SOLUTION
console.log would work when you add posts in dependency like
useEffect(() => {
console.log(posts);
}, [posts]); // added posts here