Как получить исходные данные о состоянии в реакции? - PullRequest
Новая
       15

Как получить исходные данные о состоянии в реакции?

0 голосов
/ 26 апреля 2019

Я пытаюсь реализовать окно поиска, которое будет фильтровать элементы, поступающие из конечной точки отдыха, и я не могу понять, как сохранить первое состояние списка, потому что мне нужно, чтобы оно возвращало его, если окно поиска пусто ... я пробую много примеров с this.props.someItem, но всегда получаю ошибку в консоли TypeException, которую я читаю о родительских дочерних компонентах, но безуспешно. Я пытался заставить дочерний компонент выполнить запрос и извлечь данные, но потом мне не удалось получить их в родительский класс, я попробовал "this.state = {foo []: foo2}"; не работает, я попытался назначить его напрямую foo = this.props.foo2; снова без удачи я получил TypeError. Извините, это может быть простой вопрос, но я очень новичок в JS и реагирую. Спасибо за любую помощь заранее. 

  class About extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [],
        };

        this.handleChange = this.handleChange.bind(this);

    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            items: nextProps.model
        });
    }

    componentDidMount() {
        fetch('something/')
            .then(res => res.json())
            .then((result) => {
                    this.setState({
                        items: result
                    });
                }
            )
    }

у меня есть функция handleChange (e) => {}; как получить начальное состояние массива "items"? FilterList = this.props.items - я попробовал это, это дает мне ошибку TypeError: undefined ans также, если я изменяю состояние, все в порядке, но исходные данные потеряны, и я хочу спросить, является ли хорошей практикой извлекать данные каждый раз, если запрос включает в себя все данные для этого представления, например.

Ответы [ 2 ]

1 голос
/ 26 апреля 2019

Попробуйте это: 

class About extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        items: [],
        filteredItems: []
    };

    this.handleChange = this.handleChange.bind(this);

}
componentDidMount() {
    fetch('something/')
        .then(res => res.json())
        .then((result) => {
            this.setState({
                items: result
                //Note: You can set filteredItems here to result as well  
                //if you want it to start out unfiltered
            });
        }
        )
}
handleChange(evt) {
    const baseItems = this.state.items;
    //Your filtering logic here
    this.setState({ filteredItems: yourFilteredArray });
}
0 голосов
/ 26 апреля 2019

Вам понадобятся два массива, один для исходных данных и один для отфильтрованных данных.

Ваше начальное состояние будет выглядеть. 

constructor(props) {
  super(props);

  this.state = {
    items: [],
    filteredList: [],
    isLoading: true, // show a spinner while fetching data from api
  };
  //....
}

Оба ваших массива будут иметь одинаковые данные, установите данные из API для обоих массивов. 

componentDidMount() {
  fetch("something/")
    .then(res => res.json())
    .then(result => {
      this.setState({
        items: result,
        filteredList: result,
        isLoading: false,
      });
    });
}

Рабочая демоверсия

Я ответил на аналогичный вопрос здесь

...