Question

我需要将孩子的状态（月份）传递给父母。在更新Child（handleMonth）中的状态（月份）后，它可以很好地工作，但是如果什么也没有更新……只是未定义，则无法工作。

我需要此状态才能将其发送到不相关的组件中，例如：this.props.navigation.state.params.month

父项

class Home extends Component {
  constructor(){
    super();
    this.state = {
      month: moment().format("MMMM YYYY")
    }

    this.getData = this.getData.bind(this);
  }
    getData = (val) => {
        this.setState({month: val});     
    }
// this I need to send month as props to unrelated component(Screen)
    showList = () => {
      this.props.navigation.navigate('CostDetailsMonth', {
        month: this.state.month });
      this.getData()
    }
render(){
    return (
        <View style={styles.container}>
         <Costs showList={this.showList} sendData={this.getData} />
        </View>
)}}

子组件

class Costs extends Component {
  constructor(props){
    super(props)
    this.state = {
      month: moment().format("MMMM YYYY")
    }
  }

  handleMonth= (itemValue) => {
    this.setState({month: itemValue});
    // send selected month to parent (HOME)     
    this.props.sendData(itemValue); 
  }
  
  render () {
     return (
        <View style={styles.data}>
          <TouchableOpacity onPress={this.props.showList}>
            <SelectMonth 
              handleMonth={this.handleMonth}
            />
            <Text style={styles.total}>{totalMonth}</Text>
          </TouchableOpacity>
        </View>
)}}

启动App时出现“ undefined”，然后选择“ May”获得“ May”的月份。单击五月后，再次返回“未定义”。不知道是否足够清楚，但是我需要帮助。

PS。在这种情况下，由于组件“日期选择”太复杂，因此无法使用Redux。

Answer 1

如果将setValue函数传递给Parent的子组件，该子组件设置了由Parent管理的值，那么您也可以传递该值本身，而不以本地状态将其复制到Child中。

const Child = ({ value, setValue }) => (
  //no point in copying value to local state here
  //  just use the value that's been passed by Parent
  <input
    type="text"
    onChange={(e) => setValue(e.target.value)}
    value={value}
  />
);
const Parent = () => {
  //both value and setter are defined in Parent
  const [value, setValue] = React.useState('');
  //just pass both the value setter and the value to Child
  return <Child value={value} setValue={setValue} />;
};
ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>

Answer 2

您可以像使用componentDidMount()

componentDidMount(){
  this.props.sendData(itemValue); 
}

一旦子组件成功安装，这将更新父状态

将数据从子级传递到父级React

2 个答案: