score:2
just call the second function in the then()
block of the first and pass the data as a param. setstate
is asynchronous so you can't rely on the data to be set immediately.
fetchduel = () => {
const duelid = this.props.match.params.duelid;
axios.get(`http://127.0.0.1:8000/api/duel/${duelid}`,
{'headers': {'authorization': `token ${localstorage.getitem('token')}`}})
.then(res => {
this.setstate({
duel: res.data
});
this.fetchdataset(res.data);
});
};
score:0
just call the second function in the .then()
of the first function using data from the response. example:
class dueldetail extends react.component {
state = {
duel: [],
dataset: null
};
fetchduel = () => {
const duelid = this.props.match.params.duelid;
axios.get(`http://127.0.0.1:8000/api/duel/${duelid}`,
{'headers': {'authorization': `token ${localstorage.getitem('token')}`}})
.then(res => {
this.setstate({
duel: res.data
});
this.fetchdataset(res.data.dataset)
// pass whatever property you get from the response here.
});
};
fetchdataset = (datasetid) => {
axios.get(`http://127.0.0.1:8000/api/dataset/${datasetid}`,
{'headers': {'authorization': `token ${localstorage.getitem('token')}`}})
.then(res => {
this.setstate({
dataset: res.data
});
});
};
componentdidmount() {
this.fetchduel()
}
score:1
as the 2 actions are async you need to handle it accordingly.
axios get returns a promise .so you can call the second action in the then block of the first action.
also, setstate is an aync action.(it gets queued up and doesn't get triggered instantly). use the data received from the first action, in its then block, pass it to the second action
Source: stackoverflow.com
Related Query
- Fetching methods depends on each other
- Align next to each other in <View/> react native
- Components overlapping each other in React
- My first sample table using react-data-grid, columns are not rendered next to each other, instead they are overlapping over and over each other
- React Component inline style shorthand declaration overwriting each other
- How to avoid adding field change handling methods and other boilerplates in react form?
- How should child components in React communicate between each other in a clean and maintainable fashion?
- Render two components adjacent to each other in React
- Material-UI and reactJS components always overlaps each other
- React: how to prevent api calls in ComponentDidMount and in ComponentDidUpdate override each other
- CSS grid items stacking on top of each other instead of respecting grid-area
- Best workflow for developing npm packages that depend on each other
- How action and reducers are connected with each other in react redux
- react one state variable depends on multiple other states variables
- Redux ToolKit Query - Make multiple queries in the same component dependant on each other
- Redux sending two dispatch after each other then the first dispatch get lost
- Is setting state directly after each other bad?
- ES6 React: Will ES.Next's @autobind bind methods only once for each instance?
- Axios is preventing other methods from being executed
- Using Map To Create Components - but functions are tied to each other
- HTML Canvas, Polygons are connected each other
- Can't spy on an event handler even though I can spy on other methods
- Can two React distinct and mounted components communicate with each other using props?
- Stacked divs resizing each other
- Other way to creating a function that can receive param from each element from array?
- Two Inputs have two states which are dependent on each other
- Making 2 changes to the state that cancel each other not re-triggering useEffect
- Material UI : Place the avatar and text next to each other in the first column of the table
- React Typescript: How run some lines at the same time as each other, and other parts need to wait
- Create contexts in multiple files and share functions and states with each other
More Query from same tag
- How to disable pagination dots in Swiper with Center Mode?
- How can I continuously append HTML element in JSX ? (React)
- Spread syntax not working as expected with array of objects
- Cookies are stored with fetch but not with axios
- How to code a good re-render parent call?
- How to manage state in Gatsby Js project
- React setState spread operator not supported in Chrome 40
- Is there a way to change the close icons on the autocomplete component of material ui?
- How do i make a very basic useState hook in React?
- How to clone a react element for dragging purposes
- Jest mock action creator result
- How to access the key's value of Ant select
- Reactjs component - one vs many
- YARN warning "has unmet peer dependency". What do with this?
- Modifying default configuration for react app
- componentDidMount not firing on prop change
- Attempted import error: 'DatePicker' is not exported from 'gestalt'
- Why doesn't (Flux) state management use static functions instead of named properties
- Using Array.find() to try and dynamically grab a specific object value and return it based on Object name, nothing returning from function
- Actions must be plain objects while using redux thunk
- React.useEffect() second argument default value
- React Hooks: Shuffle array immediately on load, and onClick
- Unable to use hook in HOC for functional component
- how to use bootstrap.min.js in react 4 application
- React Modal not working in Header Component
- React Error: "SharedArrayBuffer is not defined" in Firefox
- In react while using function ,it's property not showing on screen
- get synatx error from writing javascript destructure with export function
- Handle memoizing a component that gets data from API call on an interval in React?
- State Keeps Refreshing Hundreds of Times, Even With useEffect