This question already has answers here:
setState doesn't update the state immediately [duplicate]
(15 answers)
Closed 3 years ago.
I am learning Redux with React. I am using dispatch like below
this.props.dispatch(uploadImage(formData, config, element_id));
My mapStateToProps is like below
const mapStateToProps = state => ({
uploadImage: state.addressReducer.uploadImage
});
export default connect(mapStateToProps)(ModalElement);
I would like to get output like below
componentWillReceiveProps(nextProps) {
if (nextProps.uploadImage) {
this.setState({ photostatus: 'image' });
console.log(this.state.photostatus) // getting wrong output, not `image`
}
}
Here is my Repo https://github.com/afoysal/mern/blob/master/client/src/components/ModalElement.js
if (nextProps.uploadImage) {
this.setState({ photostatus: 'image'
},()=>console.log(this.state.photostatus))
}
check by changing this way
componentWillReceiveProps(nextProps) {
if (nextProps.uploadImage) {
this.setState({ photostatus: 'image' }, () =>{
console.log(this.state.photostatus) // this.setState is asynchronous so you won't find the changes immediately
}
);
}
}
Related
This question already has answers here:
Next.js getServerSideProps is always undefined
(2 answers)
NEXTJS: getServerSideProps not working into components
(2 answers)
Closed 9 months ago.
Below is the component
function AsideLeft({initialAsideLeftHandler}: InferGetServerSidePropsType<typeof getServerSideProps>) {
console.log(initialAsideLeftHandler)
// ...
}
Below does not work and returns undefined
export const getServerSideProps:GetServerSideProps = async ({req}) => {
const cookies = parseCookies(req);
return {
props: {
initialAsideLeftHandler: cookies.asideLeftHandler
}
};
}
export default AsideLeft;
So I tried changing the return value to hardcoded object to see what would happen...but still, it returns undefined
export const getServerSideProps:GetServerSideProps = async () => {
return {
props: {
initialAsideLeftHandler: {x:0,y:0}
}
};
}
export default AsideLeft;
I am trying to pass values from API to state but always give this error.
TypeError: Cannot read property 'ids' of undefined
selectIds
I am using the 'reduxjs/toolkit' I try everything but still continue that error could you please help me
this is a code from the Slic file
export const getListNamesDictionary = createAsyncThunk('dictionary/names/getNames', async () => {
try {
const response = await axios.get('http://localhost:6005/api/lookup/list-name');
const data = await response.data;
// dispatch(getNames(data));
debugger;
console.log(data);
return data;
} catch (error) {
return console.error(error.message);
}
});
const namesAdapter = createEntityAdapter({});
and the Slic :
const namesDictionarySlice = createSlice({
name: 'names',
initialState: {
names: []
},
reducers: {
},
extractors: {
[getListNamesDictionary.fulfilled]: (state, action) => {
state.entities.push(action.payload);
}
}
});
export const { selectAll: selectNamesDictionary } = namesAdapter.getSelectors(state => state.data);
and this code from component where I need to dispatch the action
const names = useSelector(selectNamesDictionary);
useEffect(() => {
// dispatch(getListNamesDictionary()).then(() => setLoading(false));
dispatch(getListNamesDictionary()).then(() => setLoading(false));
}, [dispatch]);
any suggesting why that error? and thanks
You are not using the entity adapter properly. It expects to manage a state in the form:
{
ids: [1, 2],
entities: {
1: {/*...*/},
2: {/*...*/}
}
}
Your names slice doesn't match that shape. But that's an easy fix as the namesAdapter provides all of the needed tools. Quick rundown of errors to fix:
property name extractors should be extraReducers
state.entities.push needs to be replaced with an adapter function
initialState needs to have properties ids and entities
selectors need to target the correct location
const namesAdapter = createEntityAdapter({});
const namesDictionarySlice = createSlice({
name: "names",
initialState: namesAdapter.getInitialState(),
reducers: {},
extraReducers: {
[getListNamesDictionary.fulfilled]: namesAdapter.upsertMany
}
});
This fixes the first three bullets. Regarding the reducer, it might make more sense if you write it out like this, but it does the same thing.
[getListNamesDictionary.fulfilled]: (state, action) => {
namesAdapter.upsertMany(state, action)
}
The last bullet point is the cause of the specific error message the you posted:
TypeError: Cannot read property 'ids' of undefined
It actually seems like state.data is undefined. Is this namesDictionarySlice being used to control the data property of your root state? If it is something else, like state.names, then you need to change your selectors to namesAdapter.getSelectors(state => state.names).
If your store looks like this:
const store = configureStore({
reducer: {
names: namesReducer
}
});
You would want:
export const { selectAll: selectNamesDictionary } = namesAdapter.getSelectors(
(state) => state.names // select the entity adapter data from the root state
);
in Slic function, I make a mistake in writing, I most write 'extraReducer' but I wrote "extractors" :D
I have a redux store with multiple teams.
const store = {
selectedTeamId: 'team1';
teams: {
team1: { ... },
team2: { ... },
team3: { ... },
},
};
At any given time a teamId is set.
Now given that I must select the team using the ID each time I call mapStateToProps(), I feel this is cumbersome.
Instead of doing this all the time:
mapStateToProps({ selectedTeamId, teams }) {
return {
team: teams[selectedTeamId],
}
}
Can I pre-process the store using some middleware instead of repeating this pattern in map state to props?
Approach suggested by Redux docs is to create a selector for currently active team and reuse it across all components
// selector itself is a pure function of state
// usually put in separate file, or in file with reducer
const activeTeamSelector = state => state.teams.teams[state.teams.selectedTeamId]
// in connect
const mapStateToProps = (state) => ({
activeTeam: activeTeamSelector(state),
})
That, of course, if you are using combineReducers and teams reducer is called teams in state. If you aren't, and selectedTeamId and teams are contained right in your store, following will work
const activeTeamSelector = state => state.teams[state.selectedTeamId]
Notice how I only had to change selector for this, and not every mapStateToProps in all the components
read more about Normalizing Store State and Computing Derived Data in Redux docs
Using a middleware for this scenario isn't performant (if I understood your question correctly :) ). I will outline 3 options you can use to achieve this:
Option 1
return both selectedTeamId and teams in mapStateToProps, this will allow you to find the team you need for each selected id:
mapStateToProps({ selectedTeamId, teams }) {
return {
selectedTeamId,
teams
}
}
That way you can access these props in render:
render() {
const { teams, selectedTeamId } = this.props;
return <Team team={teams.find(team => team.id === selectedTeamId)} />
}
Note: <Team /> is just a component I made for demonstration
Option 2
you can use reselect library to avoid recomputing this prop:
import { createSelector } from 'reselect'
const teams = state => state.teams;
const selectedTeamId = state => state.selectedTeamId;
const subtotalSelector = createSelector(
teams,
selectedTeamId,
(teams, selectedTeamId) => items.find(team => team.id === selectedTeamId)
)
Option 3
Create an action that will dispatch 'SELECT_TEAM' with the teamId
export function setSelectedTeam(id) {
return { type: types.SELECT_TEAM, payload: id };
}
Create a reducer for that type and return selectedTeam:
[types.SELECT_TEAM]: (state, payload)=> {
return {
...state,
selectedTeam: state.teams.find(team => team.id === payload.id)
};
},
That way you can have a selector for selectedTeam
export const getSelectedTeam = state => state.selectedTeam;
Hope it helps
I eventually used reselect, with thanks to the recommendation of #jank.
One of things I wanted to do was abstract away the need for selectors to appear in mapStateToProps. In order to do that, I wrapped redux connect. This allows insertion of a denormalizer function before mapStateToProps.
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
const getActiveTeamId = state => state.activeTeamId;
const getAllTeams = state => state.teams;
const teamSelector = createSelector(
getActiveTeamId,
getAllTeams,
(activeTeamId, teams) => teams[activeTeamId],
);
function denormalizer(mapStateToProps) {
return state => {
return mapStateToProps({ team: teamSelector(state) });
};
}
export default function reConnect(mapStateToProps = null, actions = null) {
const denormalizedMapStateToProps = denormalizer(mapStateToProps);
return function callConnect(Component) {
return connect(denormalizedMapStateToProps, actions)(Component);
};
}
I am new to React Native and Firebase, this is probably easy but I can't figure out what's wrong. I'm trying to:
(1) Fetch a list of items from my Firebase database, convert the snapshot.val() that Firebase returns into an array (DONE)
(2) Filter that array for when each object has a specific color (DONE)
(3) Send that filtered array of objects to a function that renders a JSX component to the screen (NOT WORKING)
PROBLEM - The console.log above the return() statement in renderItems() tells me that I am getting the data that I need to be there correctly, but for whatever reason, the JSX components are not rendering to the screen. I feel like there is something simple I am missing, but I just can't figure out what. Please help!
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import _ from 'lodash';
import firebase from 'firebase';
import Item from './Item';
class ItemList extends Component {
getItemsByColor(color) {
const itemsRef = firebase.database().ref('/items/');
itemsRef.once('value').then((snapshot) => {
const filteredItems = _.filter(snapshot.val(), item => {
return item.color === color;
});
this.renderItems(filteredItems);
}, (error) => {
// The Promise was rejected.
console.error(error);
});
}
renderItems(filteredItems) {
filteredItems.map((item) => {
console.log(item.name);
return <Item name={item.name} color={item.color} />;
});
}
render() {
return (
<ScrollView style={{ backgroundColor: '#333', flex: 1 }}>
{this.getItemsByColor('blue')}
</ScrollView>
);
}
}
export default ItemList;
Within renderItems() you are returning each <Item/> to the map function, but are not then returning the result of the function afterwards. Try including another return like so:
renderItems(filteredItems) {
return filteredItems.map((item) => {
console.log(item.name);
return <Item name={item.name} color={item.color} />;
});
}
You may need to then put in a couple more return statements in getItemsByColor() as well so that the array of <Item/>'s is returned to the function call within render().
I'm trying to get a basic timer going in react-native, but it's not working. I get no errors in the console. It just simply ignores the setInterval. I read the TimerMixin issue with ES6 (not supported). So what is the alternative if you want to use just a basic setInterval timer?, as it simply does not work in its simplest form shown here...
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
componentDidMount() {
console.log('COMPONENTDIDMOUNT')
//this.timer= <--//This doesn't work either
var timer = setInterval(() => {
console.log('I do not leak!');
}, 5000);
}
componentWillUnmount() {
console.log('COMPONENTWILLUNMOUNT')
clearInterval(timer);
}
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
You need to save the time as an instance variable and clear it on component unmount. Example:
componentDidMount() {
this._interval = setInterval(() => {
// Your code
}, 5000);
}
componentWillUnmount() {
clearInterval(this._interval);
}
You can try this module as Timers in react-native is little pain with ES6.
https://github.com/fractaltech/react-native-timer
As per your screenshot, it clearly mentions there is a time difference between your device and debugger. Please sync both devices to use a time server (automatically set date and time) and issue will be resolved.
Reference: https://github.com/facebook/react-native/issues/9436