JavaScript、html 和 React js。调用 this.state.filteredUsers.map 时出错((用户)

Question

我必须创建一个模式，在其中我必须执行搜索并完成您给我的输入。我在 api 中查找的信息，代码如下:

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

还要记住，react 不会保证状态会立即更新:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. react docs

这是一篇很棒的文章，可以帮助您更多地了解问题。 3 Reasons why I stopped using React.setState