Trung tâm cá nhân
sách gpt4 ai đã đi

reactjs - 如何在对象数组中添加一个对象？ ReactJS？

In lại 作者：行者123 更新时间：2023-12-03 14:26:59 27 4
mua khóa gpt4 Nike

我的项目是一个对象数组，我只获取名称并在 3 in 3 的屏幕上渲染，使用“下一个”和“上一个”按钮更改名称，并且可以过滤字母。

我想要添加一个新值，在输入中键入并单击按钮Thêm vào.

我的代码按钮:

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

我希望将值插入到filtered数组中。

我的全部代码:

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    siêu();

    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) => 
  •  {item.name}  
    • )
          .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() {
        trở lại (
          

            
            
            
            
            
    Current Page: {this.state.currentPage}

            
      Names: {this.elementsOnScreen()}

          

        );
      }
    }

    export default App;

    1 Câu trả lời

    您将在状态中包含对象数组，然后使用 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})

    关于reactjs - 如何在对象数组中添加一个对象？ ReactJS？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49785383/

    27 4 0
    Bài viết được đề xuất: reactjs - 将用户名从登录组件传递到主页组件
    Bài viết được đề xuất: sql - 生成SQL中的所有组合
    Bài viết được đề xuất: scala - 有没有一种方法可以在Scala for loop中以不同方式处理最后一种情况？
    Bài viết được đề xuất: reactjs - Webpack 开发服务器刷新循环疯狂
    行者123
    Hồ sơ cá nhân

    Tôi là một lập trình viên xuất sắc, rất giỏi!

    Nhận phiếu giảm giá Didi Taxi miễn phí
    Mã giảm giá Didi Taxi
    Các bài viết nóng hổi trên toàn bộ trang web
    Giấy chứng nhận ICP Bắc Kinh số 000000
    Hợp tác quảng cáo: 1813099741@qq.com 6ren.com