Next.js+React进门记015【useState处理数组数据】

kaikyou3000

已于 2024-06-22 19:36:16 修改

阅读量222

点赞数 3

文章标签： javascript react.js 前端

于 2024-06-22 18:35:10 首次发布

本文链接：https://blog.csdn.net/kaikyou3000/article/details/139883652

版权

计划：每点击一次按钮，数组就增加一个元素，随之页面也增加一条数据。

在index.js页面Home组件中设置一个数组，初始值为[1,2,3]

在return代码块中增加一个ul标签和li标签，用来存放遍历的数组

添加一个按钮并调用点击事件函数handleAdd

定义handleAdd点击事件函数

刷新index.js页面，点击“追加”按钮，运行正常，说明点击事件函数handleAdd已被正常调用。

修改点击事件函数handleAdd

index.js页面代码更新如下

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Footer } from '../components/Footer'
import { Main } from '../components/Main'
import { Header } from '../components/Header'
import { useCallback, useEffect, useState } from 'react'

export default function Home() {
  const[bar, setBar] = useState(1);
  const[text, setText] = useState("a");
  const[isShow, setIsShow] = useState(true);
  const[array, setArray] = useState([1,2,3]);
 
  const handleClick = useCallback((e) =>{
    console.log(bar); 
      setBar((prevBar) => prevBar + 1);
  },[bar]);
  
  const handleChange = useCallback((e) => {
    console.log(text);
    if (e.target.value.length > 5) {
      alert("输入不能超过5个字符");
      return;
    }
    setText(e.target.value.trim());
  },[]);

  const handleDisplay = useCallback(() => {
    setIsShow((prevIsShow) => {
      console.log(prevIsShow);//打印前一次状态
      if (prevIsShow){
        return false;
      }else{return true;}
    });
  },[]);

  const handleAdd = useCallback(()=>{
    setArray((prevArray) =>{
      console.log(prevArray);
      const newArray = [...prevArray, 'Mari'];
      return newArray;
    });
  },[]);
  
  useEffect(() =>{
    document.body.style.backgroundColor = "lightblue";
    return (() =>{
      document.body.style.backgroundColor = "lightgreen";
    })
  },[]);

  return (
    <div className={styles.container}>
      <Head>
        <title>Index page</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      {isShow ? <h1>{bar}</h1> : null}
      <button  onClick={handleClick}>
      累计按钮
      </button>
      <button onClick={handleDisplay}>
        {isShow ? "不显示" : "显示"}
      </button>
      <button onClick={handleAdd}>追加</button>
      <ul>
        {console.log(array)}
        {array.map(item => {
          return(<li key={item}>{item}</li>);           
        })}
      </ul>
      <input type="text" value={text} onChange={handleChange} />
       <Main page="index"/>
     <Footer />
    </div>
  )
}

刷新页面效果如下

连续点击“追加”按钮5次，向现有数组增加5个元素，页面增加5条数据

每点一次按钮就增加一条数据的功能已经实现，但控制台出现key重复的警告，考虑到实际开发中，数据库的各条数据的ID不可能发生重复，所以该警告暂且忽略一下。但是，总觉得出现警告也是一个非常大的瑕疵，有点不舒服。

所以修改一下计划：在输入框中输入字母后，再点击“追加按钮”，把先前输入框的内容追加到页面上。

首先修改点击事件函数handleAdd

index.js页面代码更新如下

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Footer } from '../components/Footer'
import { Main } from '../components/Main'
import { Header } from '../components/Header'
import { useCallback, useEffect, useState } from 'react'

export default function Home() {
  const[bar, setBar] = useState(1);
  const[text, setText] = useState("a");
  const[isShow, setIsShow] = useState(true);
  const[array, setArray] = useState([1,2,3]);
 
  const handleClick = useCallback((e) =>{
    console.log(bar); 
      setBar((prevBar) => prevBar + 1);
  },[bar]);
  
  const handleChange = useCallback((e) => {
    console.log(text);
    if (e.target.value.length > 5) {
      alert("输入不能超过5个字符");
      return;
    }
    setText(e.target.value.trim());
  },[]);

  const handleDisplay = useCallback(() => {
    setIsShow((prevIsShow) => {
      console.log(prevIsShow);//打印前一次状态
      if (prevIsShow){
        return false;
      }else{return true;}
    });
  },[]);

  const handleAdd = useCallback(()=>{
    setArray((prevArray) =>{
      console.log(prevArray);
      if(prevArray.some((item) => item === text)){
        alert("相同数组元素已经存在！");
        return prevArray;
      }
      const newArray = [...prevArray, text];
      return newArray;
    });
  },[text]);
  
  useEffect(() =>{
    document.body.style.backgroundColor = "lightblue";
    return (() =>{
      document.body.style.backgroundColor = "lightgreen";
    })
  },[]);

  return (
    <div className={styles.container}>
      <Head>
        <title>Index page</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      {isShow ? <h1>{bar}</h1> : null}
      <button  onClick={handleClick}>
      累计按钮
      </button>
      <button onClick={handleDisplay}>
        {isShow ? "不显示" : "显示"}
      </button>
      <button onClick={handleAdd}>追加</button>
      <ul>
        {console.log(array)}
        {array.map(item => {
          return(<li key={item}>{item}</li>);           
        })}
      </ul>
      <input type="text" value={text} onChange={handleChange} />
       <Main page="index"/>
     <Footer />
    </div>
  )
}

刷新页面，点击“追加”按钮