Question

我有一个webservice，它返回一些像这样的数组数据：

[
    {
      "blocoId": "22222",
      "picture": "https://scontent.fgru5-1.fna.fbcdn.net/v/t1.0-9/26239637_564903593861404_856562314194_n.jpg?oh=798138761d9aa1a4dad08ebd1f1b7e1f&oe=5AE9E6F4",
      "latitude": -23.5533489,
      "bloco_name": "Bla bla bla lba",
      "longitude": -46.6137802
    },
    {
      "blocoId": "223123",
      "picture": "https://scontent.xx.fbcdn.net/v/t1.0-9/25498441_1563972223683785_1245115263357_n.jpg?oh=cf3a76633cfc77e1d1c3429a4135207d&oe=5AECA161",
      "latitude": -23.528079836998,
      "bloco_name": "asd asd asd ad asd",
      "longitude": -46.669401475534
    }
  ]

元素显示在列表中，如果用户点击它，则导航到详细屏幕。虽然该服务从api获取其余细节，但我想预先填充我拥有的字段。最后的json是：

{
  "blocoId": "324234",
  "is_draft": 0,
  "longitude": -46.6137802,
  "start_time": "2018-01-25T16:00:00-0200",
  "end_time": "2018-01-28T23:00:00-0200",
  "picture": "https://scontent.fgru5-1.fna.fbcdn.net/v/t1.0-9/26239637_56490355355612856562314194_n.jpg?oh=798138761d9aa1a4dad08ebd1f1b7e1f&oe=5AE9E6F4",
  "latitude": -23.5533489,
  "bloco_name": "asdasdasd"
}

到目前为止我的代码：

class BloquinhoDetail extends Component {

  componentDidMount() {
    this.props.preset(this.props.navigation.state.params.bloquinho)
    this.props.fetchBloquinhoDetail(this.props.navigation.state.params.bloquinho.blocoId)
  }

  render() {
    const startTime = this.props.bloquinho ? Moment(this.props.bloquinho.start_time).format('lll') : ''
    const outTime = this.props.bloquinho && this.props.bloquinho.end_time ? startTime + ' - ' + Moment(this.props.bloquinho.end_time).format('kk:mm') : startTime
    return (
      <ScrollView style={styles.container}>
        <Image source={{ uri: this.props.bloquinho ? this.props.bloquinho.picture: '' }} style={{ height: 220 }} resizeMode='stretch' />
        ...
    )
  }
}

const mapStateToProps = (state) => {
  return {
    bloquinho: state.bloquinhoDetail.bloquinho,
    fetching: state.bloquinhoDetail.fetching,
    error: state.bloquinhoDetail.error
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    fetchBloquinhoDetail: (id) => dispatch(BloquinhoDetailsAction.bloquinhoDetailRequest(id)),
    preset: (bloquinho) => dispatch(BloquinhoDetailsAction.bloquinhoDetailPreset(bloquinho.bloco_name, bloquinho.blocoId, bloquinho.picture))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(BloquinhoDetail)

和我的redux文件：

const { Types, Creators } = createActions({
  bloquinhoDetailRequest: ['blocoId'],
  bloquinhoDetailPreset: ['bloco_name', 'blocoId', 'picture'],
  bloquinhoDetailSuccess: ['bloquinho'],
  bloquinhoDetailFailure: null,
})

export const BloquinhoDetailTypes = Types
export default Creators

/* ------------- Initial State ------------- */

export const INITIAL_STATE = Immutable({
  bloquinho: null,
  fetching: null,
  error: null,
})

/* ------------- Reducers ------------- */

export const request = (state) =>
  state.merge({ fetching: true })

export const preset = (state, action) => {
    const { bloco_name, blocoId, picture } = action
    return state.merge({ fetching: true, bloquinho: { bloco_name, blocoId, picture }})
}

export const success = (state, action) => {
  const { bloquinho } = action
  return state.merge({ fetching: false, error: null, bloquinho })
}

export const failure = (state) =>
  state.merge({ fetching: false, error: true, bloquinho: null })

/* ------------- Hookup Reducers To Types ------------- */

export const reducer = createReducer(INITIAL_STATE, {
  [Types.BLOQUINHO_DETAIL_REQUEST]: request,
  [Types.BLOQUINHO_DETAIL_PRESET]: preset,
  [Types.BLOQUINHO_DETAIL_SUCCESS]: success,
  [Types.BLOQUINHO_DETAIL_FAILURE]: failure,
})

我遇到的问题：当我点击1张卡片，然后返回并点击第二张卡片时，第一张卡片中的数据似乎被缓存（一旦我离开屏幕，对象就不会被清理）。第二，第一次调用render函数时，我没有返回预设的值，给我＆＃34; source.uri不应为空＆＃34;。

在RN中实现这种预填充物的最佳方法是什么？

谢谢！

Answer 1

实际上，经过一些试验和错误，我想出了这个：

render() {
    if (!this.props.bloquinho)
      return null;

    const startTime = Moment(this.props.bloquinho.start_time).format('lll')
    const outTime = this.props.bloquinho.end_time ? startTime + ' - ' + Moment(this.props.bloquinho.end_time).format('kk:mm') : startTime
...

它有效！

在React Native中预填充字段

1 个答案: