如何在反应中编辑从休息呼叫收到的数据？

Question

我正在尝试打个休息电话，编辑数据然后渲染它。问题是，在编辑时，我收到一个错误 - 即使在检查数据是否存在之后也是未定义的。

我正在从以下位置进行其余调用的组件：

function Header ({timesheetData, loadTimesheet}) {    

    useEffect(() => {
        loadTimesheet(date)
    }, [])

    return(     
        <>
            <header className="header">
            <div className="wrap">
                <span className="btn-icon">
                    <IconPlus onClick={() => setIsOpen(true)} className="icon icon-plus js-modal-init"/>  
                </span>
                <div className="header-blockquote">
                    <h1 className="header-quote">{currentQuote.quote}</h1>
                    <div className="header-cite">{currentQuote.author}</div>
                </div>
            </div>
            <div className="header-inner">
                <div className="wrap">
                    <VegaIcon className="logo" alt="VegaIT"/>
                    <div className="date-wrap">
                        <IconCalendar className="icon icon-plus js-modal-init"/>
                        //
                        <time>{timesheetData.timesheet.loading ? "asd"  : edit(timesheetData)  }</time>
                        //
                    </div>
                </div>
            </div>
        </header>
            </>
        )
}


function edit(timesheetData){
    let newDate = timesheetData.timesheet.date
    newDate = newDate.split("-")
    newDate = newDate.reverse()
    return  newDate.join("/")
} 

redux 操作：

export const  loadTimesheet = (date) => {

    let url = "http://localhost:8080/api/timesheet/" + date

    return (dispatch) => {
        dispatch(getTimesheet)
        axios.get(url)
        .then((response) => {
            const timesheet = response.data
            dispatch(getTimesheetSuccess(timesheet))
        })
        .catch(error =>  {
            const errorMsg = error.message
            dispatch(getTimesheetFailure)
        })
    }
}

编辑：添加了我的 mapStateToProps 和 mapDispatchToProps

const mapStateToProps = state => {
    return {
        timesheetData: state.timesheet
    }
}

const mapDispatchToProps = dispatch => {
    return {
        loadTimesheet: (date) => dispatch(loadTimesheet(date))
    }
}

Edit2：代码：https://codesandbox.io/s/adoring-tharp-o9ibe

Answer 1

使用mapStateToProps、mapDispatchToProps：

import getTimesheet from '../actions/...'

Header ({timesheetData, loadTimesheet}) => {
 
}

const mapDispatchToProps = dispatch => {
  return {
    loadTimesheet: () => dispatch(getTimesheet()),
  }
}

const mapStateToProps = (state) => {
  return { timesheetData: state.timesheetData };
};

export default connect(mapStateToProps, mapDispatchToProps)(Header);  

也在组件中：

渲染前： 检查您是否拥有：

• timesheetData - not undefined

• timesheetData.timesheet - not undefined

• timesheetData.timesheet.loading - not undefined

  const hasData = timesheetData && !timesheetData.timesheet.loading;
  const time = hasData ? edit(timesheetData): "asd";
  

在渲染中：

<time>{time}</time>