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

Question

很难用 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>
 )
})}

Answer 1

几点：

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

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;