时间戳

首页 > 解决方案 > 更新项目数组时使用 React useState 更新 UI 时出现问题

reactjs - 更新项目数组时使用 React useState 更新 UI 时出现问题

问题描述

很难用 React 和 useState 更新我的 UI。任何帮助将不胜感激。基本上我想要做的只是删除用户添加的项目。

interface RedirectUrls {
 url: string;
}

const [redirectUrls, setRedirectUrls] = useState<RedirectUrls[]>([
 {
  url: ''
 }
])

function deleteRedirectUrl(url): void {
 let tmpUrls = redirectUrls
 tmpUrls = tmpUrls.filter(item => item.url !== url)
 setRedirectUrls(tmpUrls)
}

function handleChange (index, event): void {
 const tmpUrls = [...redirectUrls]
 tmpUrls[index].url = event.target.value
}

{redirectUrls.map((item, index) => {
 return (
  <div key={index}>
   <input type='text' onChange={(event):void => {handleChange(index,event)}}/>
   <div onClick={():void => {deleteRedirectUrl(item.url)}}>remove</div>
  </div>
 )
})}

标签： reactjstypescriptuse-state

解决方案

几点：

  1. 组件应返回单个元素。在您的情况下， map 返回一个元素数组，我必须使用一个空元素（或<React.Fragment>）包装该集合
  2. 不要忘记将value属性设置为inputelement 以使更改反映在元素中。
  3. 作为最佳实践，在处理状态变量时使用const而不是，将它们视为不可变的，以避免丢失更改，尤其是当有许多状态变量导致多次渲染时let
  4. 我们应该将类型声明为文件是打字稿，您错过了为函数的参数指定类型
  5. 进行修改后应调用 setter
import React, { useState } from 'react';

interface RedirectUrls {
  url: string;
}

const App = () => {
  const [redirectUrls, setRedirectUrls] = useState<RedirectUrls[]>([
    {
      url: 'firstUrl'
    },
    {
      url: 'secondUrl'
    }
  ])
  function deleteRedirectUrl(url: string): void {
    const tmpUrls = redirectUrls.filter(item => item.url !== url)
    setRedirectUrls(tmpUrls)
  }

  function handleChange(index: number, event: React.ChangeEvent<HTMLInputElement>): void {
    const tmpUrls = [...redirectUrls]
    tmpUrls[index].url = event.target.value
    setRedirectUrls(tmpUrls);
  }

  return <>{redirectUrls.map((item, index) => <div key={index}>
    <input type='text' value={item.url} onChange={(event): void => { handleChange(index, event) }} />
    <div onClick={(): void => { deleteRedirectUrl(item.url) }}>remove</div>
  </div>)}</>;
}


export default App;

推荐阅读