홈>
일부 작업이 호출되고 수행 된 후 내 Firebase DB에 PUT 요청을 수행하려고합니다. 내 전역 상태에는 "items"라는 배열 os 객체가 있습니다. 객체 추가, 속성 삭제 또는 편집과 같이이 배열을 업데이트 할 수있는 작업이 있습니다. 요청을 추가, 편집 또는 삭제 한 직후 요청을 보내려고합니다
내 코드 :
import React, {Component} from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {connect} from 'react-redux'
import axios from '../../axios'
import classes from './List.module.css'
import {Button,ListGroup} from 'reactstrap'
import Input from '../UI/Input/Input'
import Items from './Items/Items'
class List extends Component{
componentWillMount() {
axios.get('/list/items.json')
.then(response=>{
console.log("response.data")
console.log(response.data)
this.props.initialState(response.data)
}).catch(error=>console.log(error))
}
render(){
let inputElement = null
if(this.props.input){
inputElement=(
<Input
changedName={this.props.changedName}
changedDesc={this.props.changedDesc}
addOrEdit={this.props.addItem}
nameInput={this.props.state.nameInput}
descInput={this.props.state.descInput}
buttonText={this.props.state.buttonText}/>
)
}
let editElement = null
if(this.props.state.edit){
editElement=(
<Input
changedName={this.props.changedName}
changedDesc={this.props.changedDesc}
addOrEdit={this.props.editItem}
nameInput={this.props.state.nameInput}
descInput={this.props.state.descInput}
buttonText={this.props.state.buttonText}/>
)
}
let itemElement = null
if(this.props.items && this.props.items.length !== 0 ){
itemElement = this.props.items.map((i,index)=>{
return <Items
className={classes.items}
id={index}
name={i.itemName}
key={index}
deleteClicked={()=>this.props.deleteItem(index)}
itemIndex={()=>this.props.itemIndexChanger(index)}
editInput={()=>this.props.editItemHandler(index)}
editIndex={this.props.state.editIndex}
editElement={editElement}/>
})
}else{
itemElement = <h4 className={classes.items}>Please add an Item</h4>
}
return(
<div className={classes.items}>
<ListGroup>
{itemElement}
</ListGroup>
<hr className={classes.hr}/>
<Button
className={classes.button}
onClick={this.props.toggleInputHandler}
size="sm"
outline color='info'>
Add Items
<FontAwesomeIcon icon='plus'/>
</Button>
{inputElement}
</div>
)
}
}
const mapStateToProps = (state) =>{
return{
items:state.items,
input:state.input,
state:state,
}
}
const mapDispatchToProps = dispatch=>{
return{
toggleInputHandler:()=>dispatch({type:'TOGGLE_INPUT_HANDLER'}),
changedName:(event)=>dispatch({type:'CHANGED_NAME', payload:event.target.value}),
changedDesc:(event)=>dispatch({type:'CHANGED_DESC',payload:event.target.value}),
addItem:()=>{return(dispatch({type:'ADD_ITEM'}))},
deleteItem:(index)=>dispatch({type:'DELETE_ITEM',index:index}),
editItemHandler:(index)=>dispatch({type:'EDIT_ITEM_HANDLER',index:index}),
editItem:()=>dispatch({type:'EDIT_ITEM'}),
itemIndexChanger:(index)=>dispatch({type:'CHANGE_ITEM_INDEX',index:index}),
initialState:(value)=>dispatch({type:'SET_STATE',payload:value})
};
}
export default connect(mapStateToProps, mapDispatchToProps)(List)
여기에 도움이 필요합니다: addItem dispatch를 사용하여 객체를 "item"배열에 추가한다고 가정하면 상태의 항목을 업데이트한다는 의미입니다. additem이 호출되고 완전히 수행 된 후 axios.put 요청을 수행하려면 어떻게 업데이트 된 state.items를 내 Firebase에 보낼 수 있습니까?
주의 해 주셔서 감사합니다!
- 답변 # 1
관련 자료
- reactjs - Redux 작업으로 가져온 후 소품에 대한 논리 수행
- Reactjs/Redux는 redux 작업이 완료되면 알림을 생성합니다
- c++ - 변환 후 코드는 주어진 작업을 실행하지 않습니다
- javascript - react 및 redux - 작업 유형의 페이로드에서 데이터 가져 오기
- Oracle SQL에서 "Fetch First"를 사용한 후 행을 어떻게 정렬합니까?
- vue.js - 검색 필드 입력 후 새로운 결과 가져 오기 (nuxt, vuex)
- reactjs - React는 내보내는 경우에도 redux 작업을 가져 오지 않습니다
- reactjs - Redux 작업을 수행 할 수 없습니다 오류가 있습니다
- javascript - 반응 구성 요소 내에서 redux 작업을 디 바운스하는 방법
- reactjs - 반응 redux - 반응 고리로 작업 파견
- selenium webdriver - 특정 키워드를 검색 한 후 웹 페이지 링크를 가져 오는 방법은 무엇입니까?
- vuejs2 - 상점 오브젝트에서 조치가 이동 된 후 이벤트 복제가 있습니다
- react native - 일부 작업 호출 후 Redux가 자동으로 initalState를 반환
- php - 데이터 테이블에서 작업 후 투명 페이지로 돌아 가기
- javascript - Redux Saga는 액션이 아닌 기능을받습니다
관련 질문
- javascript : Redux-thunk를 사용한 디스패치 기능
- javascript : 내 redux 저장소의 상태를 적절하게 변경하지 않습니다.
- JavaScript React: 여러 팝아웃을 너무 빨리 열면 창이 프록시로 반환됩니다.
- javascript : redux 업데이트 삭제 존재 여부에 따라 id로 개체 내부의 개체에 값 추가
- javascript : 왜 이런 종류의 오류가 발생합니까? .Warning: validateDOMNesting(...): <아> 의 자손으로 나타날 수 없습니다. <아>
- javascript : 반응 제품에 대한 설명 표시
- javascript : 자바 스크립트를 사용하여 첫 글자를 대문자로 바꾸는 방법은 무엇입니까? 각 단어의 첫 글자
- javascript : React JS에서 map 메소드를 사용하여 배열 데이터를 인쇄하는 방법은 무엇입니까?
- javascript : React JS: 객체 요소를 문자열로 연결할 때 [객체 객체] 가져오기
- reactjs : Redux: Jest는 Class 메서드에서 작업을 디스패치할 때 오류를 감지합니다.
순수한 React와 Redux를 사용하면 이런 종류의 작업을
componentDidUpdate
로 수행 할 수 있습니다 :이것은 단순한 일회성 작업에는 적합하지만 동기화하려는 많은 값이 있거나 다른 구성 요소에서 값을 원하거나 시작하려는 경우이 접근법은 실제로 거칠기 시작할 수 있습니다. 액션에서 복잡한 비동기 동작을 해제합니다.
이러한 종류의 동작은 부작용으로 알려져 있으며, redux-thunk 및 redux-saga와 같은 미들웨어 라이브러리의 목적으로, 각각이 영역에서 고유 한 장단점이 있습니다
작업에 대한 응답으로 API 업데이트 또는 기타 복잡한 비동기 동작과 같은 부작용을 많이 사용하는 응용 프로그램을 예측하는 경우에는
componentDidUpdate
로 이동하는 대신 이러한 라이브러리 중 하나에 익숙해지는 것이 좋습니다. 경로.