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来消除警告？

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

＆＃13;

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

＆＃13;

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

反应未理解的本机错误消息

1 个答案: