Reactでの条件

Question

私は反応文書を読み、すべての条件付きサンプルを実装しようとしましたが、私のコードでは機能していないようです。ここに私のコードです：

class Main extends React.Component { 
constructor(props) { 
    super(props); 
    this.onChange = this.onChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.state = {items: [],text: ''}; 
} 
onChange(e) { 
    this.setState({text: e.target.value}); 
} 
handleSubmit(e) { 
    e.preventDefault(); 
    let newItem = this.state.items; 
    let text = this.state.text; 
    newItem.push(text); 
    let newText = ''; 
    this.setState({items: newItem, text: newText}); 
} 
render() { 
    return (
    <div className="container"> 
    <div className="inside-box"> 
     <h4>Javascript Library</h4> 
    </div> 
    <form onSubmit={this.handleSubmit}> 
     <input 
     type="text" 
     onChange={this.onChange} 
     value={this.state.text} 
     placeholder="Add your item..." /> 
     </form> 
     {/* this will compare the input that I submitted and compare with the library. It will show result if the is a library or else it will show an error */} 
     {library === this.state.items && <Result /> } 
    </div> 
    ) 
    } 
} 


const Result =() => { 
    return <h1>There is a library</h1>; 
} 

const Error =() => { 
    return <h1>There is no such library</h1>; 
} 


var library = ['react', 'angular', 'vue']; 

ReactDOM.render(<Main />, document.getElementById('app')); 

私は今ちょっと固まっています。私は他と三元演算子を使用しようとし、まだ動作しません。私は、ライブラリのデータへの入力を解析したかったのです。ここにはcodepenがあります。任意の助けが歓迎される

Answer 1

ここでの問題は、常にfalseであるequals演算子を使って2つの配列を比較しようとしていることです。これらの2つの配列はメモリ内で同じ参照を共有しないため、配列の比較は参照ではなく値に基づいています。

ライブラリには_.isEqualがあり、2つの配列を比較することができます。そうしないと、2つの配列を比較できる関数を調べることができます。

コンソールでは、[] === []を実行すると、例としてfalseが返されます。

も解決するためのヘルパーメソッドは次のようになりHow to compare arrays in JavaScript?

を参照してください。

function arrayComparator(arr1, arr2) { 
    arr1 = arr1.sort(); 
    arr2 = arr2.sort(); 
    return arr1.length === arr2.length && arr1.every(function(item, index) { 
    return item === arr2[index]; 
    }) 
} 

は、ちょうどあなたがオブジェクトの配列を持っていてたら、このヘルパーメソッドは動作を停止します{arrayComparator(library, this.state.items) && <Result />}

を行うことができます同様にそれをプログラムする必要がありますが、文字列と数字の2つの配列を比較するだけでうまくいくでしょう。ここ

が働いペンhttp://codepen.io/finalfreq/pen/GrQdEK?editors=1010

Answer 2

であるあなたのコードの中で何をしたいのか私には全く明らかではないが、あなたがチェックしたい場合は何を入力して書くと、あなたはおそらくするライブラリであるかどうか{library.indexOf(this.state.text)!=-1?<Result /> :<Error/>}

編集：何か私はあなたが何をしたいと思います

があるライブラリがあるかどう個別の状態ですべての項目をチェックすることです。

{this.state.items.map((item)=><div>{item} {library.indexOf(item)!=-1?<Result /> :<Error/>}</div>)}

codepen