Question

我的项目是一个对象数组，我只获取3和3表格的名称并在屏幕上呈现，按钮接下来，之前更改名称，并可以过滤字母。

我想要添加一个新值，以输入为单位，然后点击按钮add。

我的代码按钮：

＆＃13;

addItem = () => {
  const inValue = {
    id: 0,
    name: this.state.input
  }
  this.setState({
    filtered: this.state.filtered.concat(inValue),
    currentPage: 0
  })
}

＆＃13;

我希望将值插入filtered数组。

我的代码全部：

＆＃13;

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();

    const peoples =[{id:0, name:"Jean"}, 
      {id:1, name:"Jaha"}, 
      {id:2, name:"Rido"}, 
      {id:3, name:"Ja"}, 
      {id:4, name:"Letia"}, 
      {id:5, name:"Di"}, 
      {id:6, name:"Dane"}, 
      {id:7, name:"Tamy"}, 
      {id:8, name:"Tass"},
      {id:9, name:"Ts"}, 
      {id:10, name:"Abu"}, 
      {id:11, name:"Ab"}];
    
    this.state = {
      elementsPerPage:3,
      currentPage:0,
      peoples,
      input: "",
      filtered: peoples,
      teste: '',
    };


  } 
  
getValueInput = (evt) => {
  const inputValue = evt.target.value;
  this.setState({ input: inputValue });
  this.filterNames(inputValue);
}

filterNames = (inputValue)=> {
  const { peoples } = this.state;
  this.setState({
    filtered: peoples.filter(item => 
       item.name.includes(inputValue)),
    currentPage:0
  });
  const Oi = this.state.filtered.map(item=>item.name);
if(Oi.length<=0){
  alert('Você está adicionando um nome')
}
    console.log(Oi)
  }

  
  elementsOnScreen = () => {
    const {elementsPerPage, currentPage, filtered} = this.state;
    return filtered
      .map((item) => <li key={item.id}> {item.name} <button onClick={() => this.remove(item.name)}> Delete </button> </li>)
      .slice(currentPage*elementsPerPage, currentPage*elementsPerPage + elementsPerPage);
    
    if(this.state.filtered.length < 1){
      this.setState({currentPage: this.state.currentPage - 1})
    }
   
  }

  remove = (id) => {
  console.log(this.state.filtered.length)
    if(this.state.filtered.length < 0){
       this.setState({currentPange: this.state.currenPage - 1})
    }
  this.setState({filtered: this.state.filtered.filter(item => item.name !== id) })
}
  
 nextPage = () => {
         console.log(this.state.filtered)

    const {elementsPerPage, currentPage, filtered} = this.state;
    
    if ((currentPage+1) * elementsPerPage < filtered.length){
      this.setState({ currentPage: this.state.currentPage + 1 });
    }
  }
  
    previousPage = () => {
      const { currentPage } = this.state;
      if(currentPage - 1 >= 0){
         this.setState({ currentPage: this.state.currentPage - 1 });
      }
  }
    addItem = () =>{
        const inValue = {id:0 ,name: this.state.input}
        this.setState({filtered: this.state.filtered.concat(inValue), currentPage: 0})
      }
    

  render() {
    return (
      <div>
        <button onClick={this.addItem}> Add </button>
        <input type="text" onChange={ this.getValueInput }></input>
        <button onClick={this.previousPage}> Previous </button>
        <button onClick={this.nextPage}> Next </button>
        <h3>Current Page: {this.state.currentPage}</h3>
        <ul>Names: {this.elementsOnScreen()}</ul>
      </div>
    );
  }
}

export default App;

＆＃13;

Answer 1

您可以在州内包含对象数组，然后使用setState

this.state = {
      elementsPerPage:3,
      currentPage:0,
      peoples,
      input: "",
      filtered: peoples,
      teste: '',
      peoples: [
  {id:0, name:"Jean"}, 
  {id:1, name:"Jaha"}, 
  {id:2, name:"Rido"}, 
  {id:3, name:"Ja"}, 
  {id:4, name:"Letia"}, 
  {id:5, name:"Di"}, 
  {id:6, name:"Dane"}, 
  {id:7, name:"Tamy"}, 
  {id:8, name:"Tass"},
  {id:9, name:"Ts"}, 
  {id:10, name:"Abu"}, 
  {id:11, name:"Ab"}];
    };

要更新peoples数组，首先需要创建peoples数组的副本，修改副本，然后使用setState进行更新。

let { peoples } = this.state;
peoples.push({ id:12, name:"Jean"}) 
this.setState({peoples: peoples})

Answer 2

看起来您已经使用输入的输入更新了状态。

因此，在添加按钮中，您可以获取状态值并将其推送到people数组。像这样：

addItem = () => {
  const { inputValue, people } = this.state;
  if (!inputValue) return; // check if inputValue has any value
  people.push({ id: people.length+1, name: inputValue )} // I don't recommend using sequencial ids like this, you'd better have a handler to generate it for you
  this.setState({ people, inputValue: '' }); // update people and clear input
}

希望有所帮助

如何在对象数组中添加对象？ ReactJS？

2 个答案: