Я нажимаю на свой <CheckBox />, отправляю идентификатор и использую код:

this.setState({
  ids: ids.push(id)
});

Сделать мой this.state.ids массивом идентификаторов.

Первый клик выглядит очень хорошо, это массив чисел

enter image description here

Но когда я нажимаю другой <CheckBox />, отображается ошибка.

push is not a function .

Я console.log('before', ids); это и проверяю typeof, я обнаружил, что это число, а не массив. Меня это смущает. Потому что, когда я нажимаю <CheckBox /> в первый раз. console.log('after', ids); - это массив, а не число.

enter image description here

Вот мой код:

FirstScreen :

import React, { Component } from 'react';
import { View, FlatList } from 'react-native';
import { Button } from 'react-native-elements';
import FilterComponent from './common/FilterComponent';

const testArray = [
  { id: '0', name: 'test1' },
  { id: '1', name: 'test2' },
  { id: '2', name: 'test3' },
  { id: '3', name: 'test4' },
  { id: '4', name: 'test5' },
  { id: '5', name: 'test6' },
];

class FilterScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ids: []
    };
  }

  getIds = (id) => {
    const { ids } = this.state;
    console.log('before', ids);
    console.log(typeof ids);

    this.setState({
      ids: ids.push(id)
    });

    console.log('after', ids);
  }

  renderItem = ({ item }) => {
    return (
      <FilterComponent item={item} getIds={this.getIds} />
    );
  }

  render() {
    return (
      <View>
        <FlatList
          style={{ backgroundColor: '#ffffff' }}
          data={testArray}
          renderItem={this.renderItem} 
          horizontal={false}
          keyExtractor={(item, index) => index.toString()} 
        />
      </View>
    );
  }
}

export default FilterScreen;

FilterComponent :

import React, { Component } from 'react';
import { CheckBox } from 'react-native-elements';

class FilterComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      checked: false,
    };
  }

  render() {
    const { id, name } = this.props.item;
    console.log('component', id);
    return (
      <CheckBox
        title={name}
        checked={this.state.checked}
        onPress={() => {
          this.setState({ checked: !this.state.checked });
          if (!this.state.checked) {
            this.props.getIds(id);
          }
        }}
      />
    );
  }
}

export default FilterComponent;

Почему мой this.state.ids стал номером?

Любая помощь будет оценена. Заранее спасибо.

-1
Morton 23 Окт 2018 в 11:07

2 ответа

Лучший ответ

Если вы вставляете в массив, вам нужно использовать тот же объект, например

ids.push(id); // now use the object ids
console.log(ids); // => ['1'] if id was 1

Тогда как вы сохраняете значение, возвращенное из push

ids: ids.push(id) // => ids.push(id) will not return an array
// and ids will not be an array after this

Обходной путь будет:

this.setState({
  ids: [
    ...this.state.ids,
    id,
  ],
});
1
Fawaz 23 Окт 2018 в 08:23

Я думаю, вы хотите поместить идентификатор в идентификаторы. Для этого вы можете использовать функцию concat (всегда возвращать новый массив).

ids.concat([id])

Фактически, функция push обновляет исходный массив и возвращает количество элементов в массиве. Вот почему вы впервые получаете 1 (количество элементов в массиве).

4
Ankush Sharma 23 Окт 2018 в 08:17
52944095