Как удалить элемент в интерфейсе из списка элементов в ReactJS - PullRequest
Новая
       2

Как удалить элемент в интерфейсе из списка элементов в ReactJS

0 голосов
/ 03 февраля 2020

Я пытаюсь удалить элемент из списка элементов, который я получаю динамически из REST API. По какой-то причине моя функция onDelete вызывается при нажатии кнопки «Поиск», а не по отдельности, когда я хочу удалить определенный элемент списка c. Не уверен почему. 

class Users extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchValue: '',
      users: []
    };
  }
  handleOnChange = event => {
    this.setState({ searchValue: event.target.value });
  };

  handleSearch = () => {
    this.makeApiCall(this.state.searchValue);
  };
  onDelete(e) {
    console.log('why is this being called?');
  }

  makeApiCall = async searchInput => {
    let res = await axios(
      `https://zuul-stage.whatifops.com/v1/user/phone/${searchInput}`
    );
    this.setState({ users: res.data });
  };

  render() {
    return (
      <div>
        <input
          name='text'
          type='text'
          placeholder='Search'
          onChange={event => this.handleOnChange(event)}
          value={this.state.searchValue}
        />
        <button onClick={this.handleSearch}>Search</button>{' '}
        {this.state.users ? (
          <div>
            {this.state.users.map((user, index) => (
              <div key={user.id}>
                <Row>
                  <Col lg={2} style={{ maxWidth: '9.7%' }}>
                    <Button
                      color='danger'
                      style={{ paddingTop: 12, paddingBottom: 12 }}
                      onClick={this.onDelete()}
                    >
                      <i className='fa fa-trash'></i>&nbsp; Delete
                    </Button>
                  </Col>
                  <Col lg={10}>
                    <ListGroup>
                      <ListGroupItem>
                        <strong>Email:</strong> {user.email} &nbsp; &nbsp;
                        <strong>Phone:</strong> {user.phone}
                      </ListGroupItem>
                    </ListGroup>
                  </Col>
                </Row>
              </div>
            ))}
          </div>
        ) : (
          <p>Try searching for a user</p>
        )}
      </div>
    );
  }
}

export default Users;

Функция onDelete, которую я использовал, была 

onDelete(e){
let id = e.target.id;
let updatedUsers = this.users.filter(user=>user.id!=id)
this.setState({users:updatedUsers })
}

, но я получал сообщение о том, что пользователи не определены, и он не вызывался по отдельности onClick. Не уверен, что я делаю не так, я думал, что это будет просто построить, но я изо всех сил!

1 Ответ

1 голос
/ 03 февраля 2020

Проблема в том, что вызывается onDelete (будет вызываться автоматически, если не будет изменено следующее)

изменить: 

{this.onDelete()}

на: 

{() => this.onDelete()}

или to (как только onDelete правильно ограничен): 

{this.onDelete}
...