Question

包含的代码几乎正在运行。当我切换设备时，我试图重新启动它停止的计数。我收到以下错误消息：

 Warning: Functions are not valid as a React child. This may happen if you 
 return a Component instead of <Component /> from render. Or maybe you meant 
 to call this function rather than return it.

这是我的尝试：

1）传递为this.props.count类App this.state.count（这会创建计数器的起点

2）将APP的回调函数传递给COUNTER，这将更新APP.state.count（我在COUNTERS Inc方法中执行此操作）

注意：如果您没有安装正确的依赖项，那么让忽略警告工作会有点棘手。第3,4和5行可以删除

＆＃13;

import React from 'react';
import {Button, StyleSheet, Text, View } from 'react-native';
import ignoreWarnings from 'react-native-ignore-warnings';
ignoreWarnings(['Warning: componentWillMount is deprecated',
                'Warning: componentWillReceiveProps is deprecated'])

class Count extends React.Component {
  shouldComponentUpdate(nextProps,nextState){
    if(nextProps.count % 2 === 0)return true
    else return true
  }


  render(){
    return(
      <Text style={styles.count}>{this.props.count}</Text>
    )
  }
}

class Counter extends React.Component {
  constructor(props){

    super(props)
    this.state={
      count: this.props.count,
  }
  console.log(this)
}

componentDidMount(){
   this.interval=setInterval(this.inc,1000)

}
componentWillUnmount(){
  clearInterval(this.interval)
}

inc=()=>{
  //console.log(thisate)

  this.setState(prevState =>({
    count: prevState.count + 1,
  }))

  this.props.resetCount(this.state.count)

}

  render() {

    return (
       <View>
         <Count count={this.state.count}/>
       </View>
    );
  }
}

export default class App extends React.Component {
  constructor(){
    super()
    this.state={
      show:true,
      count:0,
    }
  }
  toggle=()=> this.setState(prevState => ({
      show: !prevState.show
  }))

  resetCounter(count){
    this.setState({count: Count})
  }

  render(){
    console.log(this.state)
    if(this.state.show){
    return(
        <View style={styles.container}>
          <Button title='toggle' onPress={this.toggle}/>
          <Counter
                   count={this.state.count}
                   resetCount={(count)=>{this.resetCounter(count)}} />

        </View>
    )
    }else{
    return(
        <View style={styles.container}>
        <View style={styles.container}>
          <Button style={styles.count} title='toggle' onPress={this.toggle}/>
          <Text style={styles.count}> &nbsp;</Text>
        </View>
        </View>
      )
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgrey',
    alignItems: 'center',
    justifyContent: 'center',
  },
  count:{
    fontSize:48
  }
});

＆＃13;

Answer 1

我看到的第一个问题，我认为警告来自这里，是你的resetCounter函数。您将“Count”（组件）传递给状态。我想你想传递一下这个论点：伯爵。你可以这样做，所以没有错误：

  resetCounter(count){
    this.setState({count})
  }

第二件事就是你的回调方式。你应该这样做：

export default class App extends React.Component {
constructor(){
super()

this.resetCounter = this.resetCounter.bind(this);    

this.state={
  show:true,
  count:0,
 }
}

resetCounter(count){
    this.setState({count: Count})
}

render(){
...
return(
    <View style={styles.container}>
      <Button title='toggle' onPress={this.toggle}/>
      <Counter
               count={this.state.count}
               resetCount={this.resetCounter} />

    </View>
 ...
  )
 }
}

这对于表现和阅读来说要好得多。

希望有所帮助！

Answer 2

只是一个错字！ yureka。

<button id="takeMeBtn">click</button>
<button id="letGoBtn">unclick</button>
<div id="movingbox" style="width:30px; height:30px; border: 1px solid black; position:absolute;"></div>

需要：

resetCounter(count){
this.setState({count: Count})
}

无法更新来自子

2 个答案: