为什么不是Todo类渲染

Question

我有以下脚本。它还没有完全存在，但我仍然坚持让课程渲染

在这里，我认为我搞砸了：

{this.state.todos.map(todo=>{
             <Todo
                onToggle={()=>(this.toggle(todo.id))}
                onDelete={()=>(this.removeTodo(todo.id))}
                todo={todo}
                key={todo.id}
             />})}

以及整个代码：

＆＃13;

＆＃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>
  ) */}
  class Todo extends React.Component{

    shouldComponentUpdate(nextProps,nextState){


      return true
    }
    render(){
      console.log('inside')
    return(
      <Text>
         <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:[],
        inputText:'',
        update:false

      }
    }

  clearText(){
    this.setState({inputText:''})
    this.setState({update:true})
}


  addTodo(text){

    this.setState({update:false})
    this.setState({todos: [...this.state.todos,
                              { id:id++,
                                text: text,
                                checked:false
                              }
                          ]
                  })

    this.setState({inputText:text})



  }
  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'}}
                 value={this.state.inputText}
                  placeholder={'add Todo'}
                  onSubmitEditing={()=>{this.clearText()}}
                  onChangeText={(text) => {this.addTodo(text)}}
                  />

          <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;

＆＃13;

＆＃13;

Answer 1

您需要从地图返回数据才能呈现它。

{this.state.todos.map(todo=> (
                 <Todo
                    onToggle={()=>(this.toggle(todo.id))}
                    onDelete={()=>(this.removeTodo(todo.id))}
                    todo={todo}
                    key={todo.id}
                 />))}

=> {}返回undefined，因为它是显式块，您需要返回隐式块

Answer 2

Here is working code. I modified your code to run on my pc.

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>
  ) */}
class Todo extends React.Component {

  shouldComponentUpdate (nextProps, nextState) {


    return true
  }
  render () {
    console.log('inside')
    return (
      <Text>
        <Button title='delete' onPress={this.props.onDelete}></Button>
        <Text>{this.props.todo.text}</Text>
      </Text>
    )
  }
}
export default class App extends React.Component {
  constructor () {
    super()
    this.state = {
      todos: [],
      inputText: '',
      update: false

    }
  }

  clearText () {
    this.setState({inputText: ''})
    this.setState({update: true})
  }


  addTodo (text) {

    this.setState({update: false})
    this.setState({
      todos: [...this.state.todos,
      {
        id: id++,
        text: text,
        checked: false
      }
      ]
    })

    this.setState({inputText: text})



  }
  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'}}
          value={this.state.inputText}
          placeholder={'add Todo'}
          onSubmitEditing={() => {this.clearText()}}
          onChangeText={(text) => {this.addTodo(text)}}
        />

        <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,
    paddingTop: 3 * 10,

  }
})