【问题标题】:Not able to setState in parent component无法在父组件中设置状态
【发布时间】:2019-10-05 18:45:41
【问题描述】:

我无法从子组件调用父组件的 setState

我尝试通过在父组件中绑定一个函数并在该函数中调用 setState 来解决此问题。我在子组件的 props 中传递了函数,但它仍然找不到父组件的 setState 函数。

const CrewsAdapter = props => {
  if(props.data.loading) {
    return <View><Text>Loading crews</Text></View>
  }
  if(props.data.getAllCrews) {
      crewsNames= props.data.getAllCrews.map(crew => ({"value": crew.crewName}));
    return (
          <View style={{ flexDirection: 'column', alignItems: 'center', backgroundColor: '#ffffff' }}>
            <View style={[styles.container, { flex: 0.25 }]}>
              <Text style={styles.headerText}>Crews</Text>
            </View>
            <View style={{ flexDirection: 'row' }}>
              <View style={{ flex: 0.9 }}>
                <Dropdown label="Crews List"
                          data={crewsNames}
                          onChangeText = {(value) => {this.props.stateHandler(value)}}
                />
              </View>
            </View>
            <View style={{ flexDirection: 'row' }}>
            <Crew/>
            </View>
          </View>
    );
  }
  return <View><Text>No data</Text></View>
};

export default class CrewsScreen extends Component {
  constructor(props) {
    super(props);
    this.stateHandler = this.stateHandler.bind(this);
    this.state = {
      crewName: '',
    }
  }

  stateHandler(value){
    this.setState({crewName: value});
  }

  render() {
    const AllCrews = graphql(crewsList, {options: (props => ({}))})(CrewsAdapter);
    return (
        <SafeAreaView style={styles.screen}>
          <ToolBar />
          <AllCrews stateHandler = {this.stateHandler}/>
          <CrewsListFooter navProps={{...this.props}}/>
        </SafeAreaView>
    );
  }
}

我正在尝试在下拉列表更改时设置状态。

<Dropdown label="Crews List"
                          data={crewsNames}
                          onChangeText = {(value) => {this.props.stateHandler(value)}}
                />

但我收到错误消息:“未定义不是对象(正在评估 _this.props.stateHandler”

非常感谢您对此的任何帮助。

【问题讨论】:

    标签: reactjs react-native graphql


    【解决方案1】:

    试试onChangeText = {(value) =&gt; {props.stateHandler(value)}}

    您的子组件是一个无状态的功能组件 - 也就是一个函数 - 将 props 作为参数 - 在这种情况下,您不能通过“this.props”访问道具,因为它不是 @ 的实例987654323@ - 你只需通过 props.[propName] 访问它,就像你是其余的道具一样 - 所以 this.props 是未定义的。

    【讨论】:

    • 正确答案!如果有redux,只需调用父函数来setState
    猜你喜欢
    • 2019-09-07
    • 2020-05-07
    • 2021-03-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多