Не перерисовывает массив users?

Question

[chatterbox777]

Приветствую всех, подскажите, почему не перерисовывает когда targetValue === "" , вроде проверяю по state , targetValue = "", однако this setState не передает в стейт снова поулченный с апи массив юзеров, хотя логика прпоисана через if условие, и еще подскажите, как сделать чтобы при каждом изменении символа он искад совпадения, то ест ьпри удалении символа также происходил поиск совпадений.. у меня поиск совпадений реализован через string.match() однако он не всегда корректно работает.... помогите джуну не быть попертым с работы... спасибо!

import React from "react";
import "./LiveSearch.css";
import * as axios from "axios";
class LiveSearch extends React.Component {
  state = {
    users: [],
    targetValue: "",
  };

  handleChange(e) {
    e.preventDefault();
    let value = e.target.value;
    console.log(e.target.value);
    this.setState(() => {
      return { targetValue: value };
    });

    if (this.state.targetValue.length > 0) {
      this.setState(() => {
        let newUsers = this.state.users.filter((el) => {
          return el.name.match(this.state.targetValue);
        });
        console.log(newUsers);
        return { users: newUsers };
      });
    }
    if (this.state.targetValue === "") {
      axios
        .get(`https://social-network.samuraijs.com/api/1.0/users?count=20`)
        .then((response) => {
          console.log(response);
          this.setState(() => {
            return { users: response.data.items };
          });
        });
    }
    console.log(this.state.users);
  }

  componentDidMount() {
    axios
      .get(`https://social-network.samuraijs.com/api/1.0/users?count=20`)
      .then((response) => {
        console.log(response);
        this.setState(() => {
          return { users: response.data.items };
        });
      });
  }
  render() {
    return (
      <div className="searcher-container">
        <p>Живой Поиск</p>
        <input
          onChange={(e) => this.handleChange(e)}
          type="text"
          placeholder="Введите значение"
        />
        <div>
          <ul>
            {this.state.users.map((el, index) => {
              return <li key={index}>{el.name}</li>;
            })}
          </ul>
        </div>
      </div>
    );
  }
}

export default LiveSearch;

Answer 1

[Dimon]

setState - это асинхронный метод, если ты сделал setState({ targetValue: value }), то это не значит , что в следующей строке у тебя будет актульное значение this.state.targetValue:

handleChange(e) {
    e.preventDefault();
    const value = e.target.value;
    console.log(e.target.value);
    this.setState(() => {
      return { targetValue: value };
    });

    if (value.length > 0) {
      this.setState((prevState) => {
        const newUsers = prevState.users.filter((el) => {
          return el.name.match(value);
        });
        console.log(newUsers);
        return { users: newUsers };
      });
    }
    if (value === "") {
      axios
        .get(`https://social-network.samuraijs.com/api/1.0/users?count=20`)
        .then((response) => {
          console.log(response);
          this.setState(() => {
            return { users: response.data.items };
          });
        }, () => console.log(this.state.users)); // тут будут новые users
    }
    console.log(this.state.users); // тут не будет новых users
  }

Comments

[chatterbox777]

спасибо, добрый человек.... подскажи как понять эту тему... отладчиком побаловаться или что? как понять что там нужно было поставить const а не let.... не понял если честно, типо let постоянно перезаписывается в отличие от const.... в данном случае почему это было проблемой?

[Dimon]

У меня линтер так настроен, https://leonidlebedev.github.io/javascript-airbnb/... . В данном случае это не было проблемой. Проблема была в том что ты делаешь this.setState({ users: response.data.items }); и следом делаешь console.log('users', this.state.users); - так делать нельзя, т.к. setState асинхронный метод;

this.setState(() => {
      return { targetValue: value };
    });

    if (this.state.targetValue.length > 0) { // - тут не будте нового значения

- тут тоже самое;

я везде дебажу c помощью console.log(), если что то не понятно каждый шаг проверяю