无法使用过滤器区分是非

Question

我希望使用filter（）区分真假，但是它将值初始化为真和假。我希望true值出现在一侧，而false值出现在另一侧，这将由行分隔。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class Helloworld extends React.Component{
  render(){
    return(
      <div>
        Hello World {this.props.title}
        </div>
    )
  }
}

class Items extends React.Component{
  render(){
    return(
      <div>
      {this.props.items.map(item => <div> {item} </div>)}
      </div>
    )
  }
}

class Books extends React.Component{
  constructor(props){
    super(props)
    this.state={
      books: ['book1', 'book2', 'book3']
    }
  }
  cliclMe(){
    alert("clicked")
  }
  render(){
    return(
      <div>
        <div>Add books</div>
        <input/>
        <input type="submit" onClick ={()=> this.cliclMe()}/>
        {this.state.books.map(book => <div>{book}</div>)}
      </div>
    )
  }
}

class Todo extends React.Component{
  render(){
    return(
    <div>
      {this.props.tdo.filter( (item) => {item.done ='true'})}
      {this.props.tdo.map((iterator) =>  <div> {iterator.todo}  {iterator.done}</div>) }
      <hr/>
      {this.props.tdo.filter((item) => {item.done ='false'})}
      {this.props.tdo.map((iterator) =>  <div> {iterator.todo}  {iterator.done}</div>) } 
    </div>
    )
  }
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
            <Helloworld title="monday"/>
            <Items items={[1, 2, 3]}/>
            <Books/>
            <Todo tdo={[{todo: 'todo1', done:'true'}, {todo: 'todo2', done:'false'}, {todo: 'todo3', done:'true'}]}/>
        </header>
      </div>
    );
  }
}

export default App;

this is output im getting

但是1想要一些东西：

todo1：是

todo3：正确

todo2：否；

Answer 1

class Todo extends React.Component{
  render(){
    return(
    <div>
      {this.props.tdo.filter( (item) => item.done =='true')}
      {this.props.tdo.map((iterator) =>  <div> {iterator.todo}  {iterator.done}</div>) }
      <hr/>
      {this.props.tdo.filter((item) => item.done =='false')}
      {this.props.tdo.map((iterator) =>  <div> {iterator.todo}  {iterator.done}</div>) } 
    </div>
    )
  }
}

您应该使用==代替赋值

Answer 2

item.done ='true'或item.done ='false'正在分配值，而您需要item.done ==='true'和item.done ==='false'