Javascript、html、およびreact js。 this.state.filteredUsers.mapを呼び出す際にエラーが発生しました（ユーザ）

Question

私は検索を実行して、あなたが私に与える入力を完了する必要があるモーダルを作成する必要があります。コード：

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

class App extends React.Component { 
    constructor (props) { 
super(props); 
this.setState = { 
    users: [], 
    filteredUsers: [] 
}; 
} 


componentDidMount() { 
fetch('/users') 
    .then((resp) => resp.json()) 
    .then((users) => { 
    this.setState({ users }); 
    }) 
    .catch(function(error) { 
    console.log(error); 
    }); 
} 


search (e) { 
let value = e.target.value; 
// hace un filtrado del array de usuarios para obtener 
// aquellos cuyo nombre contiene lo ingresado en el input 
let filteredUsers = this.state.users.filter((user) => { 
    return user.name.includes(value); 
}); 
// actualiza el estado y por ende, la tabla 
this.setState({ 
    filteredUsers 
}); 
} 

render() { 
return (
    <div className="App"> 
    <div className="App-header"> 
     <img src={logo} className="App-logo" alt="logo" /> 
     <h2>Welcome to React</h2> 
    </div> 
    <p className="App-intro"> 
     To get started, edit <code>src/App.js</code> and save to reload. 
    </p> 

    <button type="button" className="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 


    <div id="myModal" className="modal fade" role="dialog"> 
     <div className="modal-dialog"> 


     <div className="modal-content"> 
      <div className="modal-header"> 
      <button type="button" className="close" data-dismiss="modal">&times;</button> 
      <h4 className="modal-title">Add Note</h4> 
      </div> 
      <div className="modal-body"> 
      <h5 className="modal-title">New Note </h5> 
      <input 
       type="text" 
       id="myInput" 
       name="search" 
       placeholder="Search.." 
       title="Type in a name" 
       onChange={this.search.bind(this)}  
      ></input> 

      <table> 
      <thead> 
       <tr> 
       <th>Name</th> 
       <th>Username</th> 
       <th>Email</th> 
       <th>Address</th> 
       <th>Phone</th> 
       <th>Company</th> 
       <th>website</th> 
       </tr> 
      </thead> 
      <tbody> 
      { 
       this.state.filteredUsers.map((user) => (
       <tr> 
        <td>{user.name}</td> 
        <td>{user.username}</td> 
        <td>{user.email}</td> 
        <td>{user.address}</td> 
        <td>{user.phone}</td> 
        <td>{user.company}</td> 
        <td>{user.website}</td> 
       </tr> 
      )) 
      } 
      </tbody> 
      </table> 

      </div> 
      <div className="modal-footer"> 
      Import: <input type="checkbox" id="myCheck"></input> 
      <button type="button" className="btn btn-default" data-dismiss="modal">Add Note</button> 
      <button type="button" className="btn btn-default" data-dismiss="modal">cancelar</button> 

      </div> 
     </div> 

     </div> 
    </div> 

    </div> 






    ); 
} 
} 
export default App; 

コードが何をすべき理論的にはAPIの情報を見つけて、オートコンプリートを行っている私は、テーブルの本体を置くまで、私は私が実行しようとしたコードのブロックを追加するとき、すべてが、正常に動作します私が得る唯一のものは白いスクリーンで、理由はわかりません。

このコードブロックを削除すると、プログラムは完璧に実行されます。

何も表示されないコードブロックで何が起こっていますか？

Answer 1

私が見る最初の事はあなたのループ要素の重要な属性を持っていないということです、それはこのようなものでなければなりません：反応

this.state.filteredUsers.map((user, index) => (
    <tr key={index}> 
     ... 
    </tr> 
)); 

また、心に留めては、その状態を保証するものではありませんすぐに更新されます：

setState（）は直ちにthis.stateを変更しませんが、 保留状態遷移を作成します。この メソッドを呼び出した後this.stateにアクセスすると、潜在的に既存の値が返される可能性があります。 react docs

ここでは、問題の詳細を理解するのに役立つ素晴らしい記事です。 3 Reasons why I stopped using React.setState