1

我正在尝试使用该filter()方法从数组中过滤掉项目，如果数组的长度小于某个数字，则在Reactjs中。到目前为止，我还无法做到这一点。

代码示例：

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        itemNumber: 2,
        items: [
        { text: "Item 1" },
        { text: "Item 2" },
        { text: "Item 3" },
        { text: "Item 4" }
      ]
    }
  }

  filterItem = () => {
    if ( this.state.items.length > this.state.itemNumber ) {

        console.log('Items length is higher');

      let newItems = this.state.items.filter(item => {
        return item < this.state.itemNumber;
      });

      console.log(newItems);

    } else {

      console.log('Items length is lower');

    }
  };

  render() {
    const { items } = this.state;
    return (
      <div>
        <ul>
        { this.state.items.map(item => 
          (
            <li key={item.id}>
              { item.text }
            </li>
          )
        )}
        </ul>
        <button onClick={this.filterItem}>Filter items!</button>
      </div>
    )
  }
}

编辑：

解决方案在这里。

4

4 回答 4

4

你永远setting不是state

 filterItem = () => {
    if ( this.state.items.length > this.state.itemNumber ) {

        console.log('Items length is higher');

      let newItems = this.state.items.filter((item,i) => {
        return i < this.state.itemNumber;
      });

      this.setState({items: newItems})

      console.log(newItems);

    } else {

      console.log('Items length is lower');

    }
  };
于 2019-09-16T17:19:55.427 回答
2

我不确定您要做什么，但您不能只使用 slice 吗？

const newItems = [...this.state.items].slice(0, this.state.itemNumber).map(item =>
于 2019-09-16T17:20:27.883 回答
1

正如@Dupocas 所说，您永远不会更新您的状态。您需要使用this.setState来更新 React 组件的状态。

我认为您的州应该有两种数组

this.state = {
    itemNumber: 2,
    items: [
       { text: "Item 1" },
       { text: "Item 2" },
       { text: "Item 3" },
       { text: "Item 4" }
    ],
    filteredItems: [],
}

然后你应该像这样修改过滤器功能：

filterItem = () => {
  if ( this.state.items.length > this.state.itemNumber ) {

      console.log('Items length is higher');

      let newItems = this.state.items.filter((item, index) => {
        return index < this.state.itemNumber;
      });

      console.log(newItems);
      this.setState({filteredItems: newItems});

  } else {

      console.log('Items length is lower');

  }
}

注意这一this.setState({filteredItems: newItems});行，这一行将更新this.state.filteredItems。

最后，在渲染函数中：

render() {
const { filteredItems } = this.state;
return (
  <div>
    <ul>
    { filteredItems.map(item => 
      (
        <li key={item.id}>
          { item.text }
        </li>
      )
    )}
    </ul>
    <button onClick={this.filterItem}>Filter items!</button>
  </div>
)
}

这将呈现一个空数组，直到单击过滤器按钮。要在第一次渲染时显示完整的数组，请将此函数添加到组件中

componentDidMount() {
  this.setState({filteredItems: [ ...this.state.items ]});
}

如果有人问做[ ...this.state.items ]什么，它被称为数组解构。

于 2019-09-16T17:31:00.397 回答
0

使用过滤器过滤数组，

let arr = ["item1", "item12", "item123"];
arr = arr.filter((item) => item.length >= 6)); //6 is the min length of item that you want.

它将返回带有过滤结果的新数组。

您可以声明任何其他数组并将结果存储在其中也喜欢

let arr = ["item1", "item12", "item123"];
let arr1 = arr.filter((item) => item.length >= 6));
于 2019-09-16T17:23:46.513 回答