Reagieren: Verwenden? und: um eine Entscheidung zu treffen

Question

Ich versuche, einige Funktionen zu implementieren, um Text zu bearbeiten.

Ich habe eine Liste von Objekten im Zustand. Wenn ich die Liste erzeuge, möchte ich prüfen, ob das Feld updatefalse oder true ist.

Ich weiß, dass ich wahrscheinlich ? und : verwenden sollte, um diese Entscheidung zu treffen, aber nicht sicher, wie man es implementiert.

function AddPerson(props) { 
    return(
     <div> 
      <input type="text" value= {props.newPerson} onChange = {props.handleUpdate}/> 
      <button type="submit" onClick= {props.addNewFriend}> Add New </button> 
     </div> 
    ) 
} 

function Person(props) { 
    return (
     props.listOfPeople.map((person, i) => { 
      // this doesn't work 
      person['update'] 
      ? null 
      : return 
      (
       <li key={i} onClick = {(e) => {props.handleEdit(e, person)}}>{person['name']}</li> 
      ) 
     }) 
    ) 
} 

Was soll ich so ändern, dass, wenn es false zurückgibt, wird es die <li ..> zurückkehren?

function ListPeople(props) { 
    return(
     <div> 
      <ul> 
       <Person listOfPeople = {props.people} handleEdit = {props.edit}/> 
      </ul> 
     </div> 
    ) 
} 

class App extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      newPerson: '', 
      people: [{name:'Eric', update: false} , {name:'Rick', update:false}, {name:'Yoni', update:false}] 
     }; 

     this.handleUpdate = this.handleUpdate.bind(this) 
     this.addNewFriend = this.addNewFriend.bind(this) 
     this.handleEdit = this.handleEdit.bind(this) 
    } 

    handleUpdate(e) { 
     this.setState({newPerson: e.target.value}) 
    } 

    addNewFriend(){ 
     console.log(this.state.newPerson) 
     const newFriendList = this.state.people.slice() 
     this.setState(
      { 
       newPerson: '', 
       people: newFriendList.concat({name:this.state.newPerson, update:false}) 
      } 
     ) 
    } 

    handleEdit(e, person) { 
     console.log(person) 
     return null 

    } 


    render() { 
     return (
      <div> 
       <AddPerson handleUpdate = {this.handleUpdate} addNewFriend = {this.addNewFriend} newPerson = {this.state.newPerson} /> 
       <ListPeople people = {this.state.people} edit={this.handleEdit} /> 
      </div> 
     ); 
    } 
} 

export default App; 

Answer 1

Entfernen Sie einfach zurück und legen Sie es vor. Tun Sie das

props.listOfPeople.map((person, i) => { 
    return person['update'] ? null : (
    <li key={i} onClick = {(e) => {props.handleEdit(e, person)}}>{person['name']}</li> 
) 
}) 

Answer 2

Bei Verwendung .map muss ein Wert zurückgegeben werden. Wenn Sie nichts zurückgeben, erhalten Sie einen Nullwert im Array. Stattdessen sollten Sie zunächst filter Ihr Array und führen Sie dann die map:

function Person(props) { 
    return (
     props.listOfPeople.filter(person => person.update).map((person, i) => { 
      return <li key={i} onClick = {(e) => {props.handleEdit(e, person)}}>{person['name']}</li> 
     }) 
    ) 
} 

EDIT:

Render <li> oder <input> basierend auf person.update:

function Person(props) { 
    return (
     props.listOfPeople.map((person, i) => { 
      if(person.update) { 
       return <li key={i}><input /></li> 
      }else { 
       return <li key={i} onClick={ e => props.handleEdit(e, person) }>{person.name}</li> 
      } 
     }) 
    ) 
} 

EDIT 2:

Foreach Schleife:

function Person(props) { 
    let people = []; 
    props.listOfPeople.forEach((person, i) => { 
     if(person.update) { 
      people.push(<li key={i}><input /></li>); 
     }else { 
      people.push(<li key={i} onClick={ e => props.handleEdit(e, person) }>{person.name}</li>); 
     } 
    }); 
    return people; 
} 

Answer 3

Ein cleverer Trick, den ich in verwenden reagieren, wenn auch nicht entscheiden, eine Komponente zu machen ist, den Vorteil von Kurzschlussauswertung aufzunehmen ->

props.listOfPeople.map((person, i) => 
    !person['update'] && 
    <li key={i} onClick = {(e) => {props.handleEdit(e, person)}}>{person['name']}</li> 
);