反应本机错误消息不理解

Question

我有以下反应原生脚本。这还不完全正确，但已经到了那里。在控制台中，我收到以下我不明白该怎么处理的消息：

Warning: componentWillMount is deprecated and will be removed in the next 
major version. Use componentDidMount instead. As a temporary workaround, you 
can rename to UNSAFE_componentWillMount.

Please update the following components: ExpoRootComponent, 
RootErrorBoundary, Text, TextInput, View

Learn more about this warning here:
react-async-component-lifecycle-hooks
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:82:15 in warn
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer- 
dev.js:5706:19 in printWarning
- ... 21 more stack frames from framework internals
14:17:34: Warning: componentWillReceiveProps is deprecated and will be 
removed in the next major version. Use static getDerivedStateFromProps 
instead.

Please update the following components: Text, TextInput, View

Learn more about this warning here:
react-async-component-lifecycle-hooks
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:82:15 in warn
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer- 
dev.js:5706:19 in printWarning
- ... 21 more stack frames from framework internals

我没有明确调用 componentWillMount。如何使用 componentDidMount 消除警告？

如何更新它要求我更新的组件？

import React from 'react';
import { TextInput,Button, StyleSheet, View,Text, ScrollView } from 'react-native';
import {Constants} from 'expo'

  let id=0
  const Todo = (props) => (
    <Text>
      {/* <input type='checkbox'
              checked={props.todo.checked}
              onClick={props.onToggle}
        /> */}
       <Button title='delete' button onPress={props.onDelete}></Button>
       <Text>{props.todo.text}</Text>
    </Text>
  )
  export default class App extends React.Component {
    constructor(){
      super()
      this.state={
        todos:[],
      }
    }



  addTodo(e){
   console.log('hello')
    console.log(e.target)
    this.setState({todos: [...this.state.todos,
                              { id:id++,
                                text: e.value,
                                checked:false
                              }
                          ]
                  })
    e.value=''
  }
  toggle(id){
    this.setState({todos: this.state.todos.map(todo=>{
                          if(id!==todo.id)return todo
                          return{
                              id:todo.id,
                              text:todo.text,
                              checked: !todo.checked}})})
  }
  removeTodo(id){
    this.setState({todos: this.state.todos.filter(todo=>(todo.id!==id))})
  }

  render(){
     return(

       <View style={styles.container}>
          <Text >Count of Todos: &nbsp;{this.state.todos.length}</Text>
          <Text >{"Todo's checked:"}&nbsp;
               {this.state.todos.filter(todo =>(todo.checked===true)).length}</Text>
          <TextInput
                 style={{height:25,borderColor:'red',borderWidth:1,textAlign:'center'}}
                  placeholder={'add ToDo'}
                  onSubmitEditing={(e)=>(this.addTodo(e.target))}/>

          <ScrollView>
           {this.state.todos.map(todo=>(
                 <Todo
                    onToggle={()=>(this.toggle(todo.id))}
                    onDelete={()=>(this.removeTodo(todo.id))}
                    todo={todo}
                    key={todo.id}
                 />))}
          </ScrollView>
       </View>
     )
    }
  }
const styles = StyleSheet.create({
  container:{
    flex:1,
    flexDirection:'column',
    height:50,

    paddingTop:3*Constants.statusBarHeight,

  }
})

Answer 1

componentWillMount 在几天前刚刚发布的 React 16.3 或 React Native 0.55 中已弃用。由于大多数库（是的，包括 Expo）尚未更新以替换这些已弃用的 API，您现在可以放心地忽略这些警告，或者升级到抑制这些生命周期警告的 React Native 0.55.2。

相关讨论：https://github.com/facebook/react-native/issues/18175