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)

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}/>)

从接收ownProps的组件起反应redux set ownProps

1 个答案: