react-native - 从接收 ownProps 的组件反应 redux set ownProps

Question

我需要在拥有 ownProps 的组件中设置 ownProps 的高度。它似乎没有更新，它总是未定义。

可以做到吗？

这是我的代码，要查看的代码行用/////////////////////////////////////

const mapStateToProps = (state: State, ownProps): Object => ({
  searchText: state.product.search.query.locationAutocomplete.searchText,
  place: state.product.search.query.locationAutocomplete.place,
  searchResults: state.product.search.query.locationAutocomplete.searchResults,
  shouldHideResults:
    state.product.search.query.locationAutocomplete.shouldHideResults,
  height: ownProps.height,
  onContentSizeChange: ownProps.onContentSizeChange
})

const mapDispatchToProps = (dispatch: Dispatch<*>): Object => ({
  updateSearchQueryPageLocationAutocompleteSearchText: (searchText: string) => {
    dispatch(
      updateSearchQueryPageLocationAutocompleteSearchText({
        searchText: searchText
      })
    )
  },
  updateSearchQueryPageLocationAutocompletePlace: (locationPlace: Place) => {
    dispatch(
      updateSearchQueryPageLocationAutocompletePlace({
        locationPlace: locationPlace
      })
    )
  },
  getSearchQueryPageLocationAutocompletePlaceDetails: (placeId: number) => {
    dispatch(
      getSearchQueryPageLocationAutocompletePlaceDetails({ placeId: placeId })
    )
  },
  getSearchQueryPageLocationAutocompleteResults: (text: string) => {
    dispatch(getSearchQueryPageLocationAutocompleteResults({ text: text }))
  },
  updateProductSearchQueryPageIsLoctionListDisplayed: (displayed: boolean) => {
    dispatch(updateProductSearchQueryPageIsLoctionListDisplayed(displayed))
  },
  updateLocationShouldHideResults: (shouldHideResults: boolean) => {
    dispatch(updateSearchQueryPageShouldHideLocationResults(shouldHideResults))
  }
})

let LocationView = (props: LocationViewProps): Object => {
  return (
    <Autocomplete
      value={props.searchText}
      customStyle={autocompleteStyle.customStyle(props.place)}
      placeholder={'Location'}
      updateValue={props.updateSearchQueryPageLocationAutocompleteSearchText}
      updateDataBehindValue={
        props.updateSearchQueryPageLocationAutocompletePlace
      }
      getDataBehindValueDetails={
        props.getSearchQueryPageLocationAutocompletePlaceDetails
      }
      autocompleteResults={props.searchResults}
      getSearchQueryPageLocationAutocompleteResults={
        props.getSearchQueryPageLocationAutocompleteResults
      }
      shouldHideResults={props.shouldHideResults}
      onListItemSelect={location => {
        props.getSearchQueryPageLocationAutocompletePlaceDetails(
          location.place_id
        )
        props.updateSearchQueryPageLocationAutocompleteSearchText(
          location.description
        )
        props.updateLocationShouldHideResults(true)
        props.updateProductSearchQueryPageIsLoctionListDisplayed(false)
      }}
      onContentSizeChange={height => {
        console.log(height)
        props.height = getHeight(height)}////////////////////////this line///////////////////////
      }
      onChangeText={text => onChangeText(props, text)}
    />
  )
}

const getHeight = height => {
  const h = Math.max(60, height)
  return h
}

LocationView = connect(
  mapStateToProps,
  mapDispatchToProps
)(LocationView)

标签： react-nativereduxreact-redux

Answer 1

height: ownProps.height,

没关系，要么你从父母那里收到你的道具<MyComponent height={...} ...，要么你从你的商店传递道具mapStateToProps = (state, ownProps) => ({ height: state..., //here ownProps contains to the props passed to MyComponent, so height={...} })

如果要更改从父级传递的道具，请使用类似的句柄函数

handleSetheight = height => this.setState({ height }) 
return (<Child height={this.state.height} setHeight={this.handleSetHeight}/>)