>

일부 작업이 호출되고 수행 된 후 내 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

    순수한 React와 Redux를 사용하면 이런 종류의 작업을 componentDidUpdate 로 수행 할 수 있습니다 :

    componentDidUpdate(prevProps, prevState) {
        if (prevProps.someValue !== this.props.someValue) {
            axios.put( /* ...some axios call to sync someValue */ )
        }
    }
    
    

    이것은 단순한 일회성 작업에는 적합하지만 동기화하려는 많은 값이 있거나 다른 구성 요소에서 값을 원하거나 시작하려는 경우이 접근법은 실제로 거칠기 시작할 수 있습니다. 액션에서 복잡한 비동기 동작을 해제합니다.

    이러한 종류의 동작은 부작용으로 알려져 있으며, redux-thunk 및 redux-saga와 같은 미들웨어 라이브러리의 목적으로, 각각이 영역에서 고유 한 장단점이 있습니다

    작업에 대한 응답으로 API 업데이트 또는 기타 복잡한 비동기 동작과 같은 부작용을 많이 사용하는 응용 프로그램을 예측하는 경우에는 componentDidUpdate 로 이동하는 대신 이러한 라이브러리 중 하나에 익숙해지는 것이 좋습니다.  경로.

  • 이전 SQL의 다른 열을 기반으로 한 열의 고유 카운트
  • 다음 Swift에서 오디오 녹음