Question

const [state, setState] = useState<string[]>([]);

const deleteItem = (item: string) => {
    let newItem: string[] = [];
    setState((prev) => {
        newItem = [...prev];
        newItem.splice(newItem.indexOf(item), 1);
        setState(newItem);
        return newItem;
    });
};

打字稿给（prev）一个错误： Argument of type '(prev: any) => string[]' is not assignable to parameter of type 'string[]'.

Answer 1

更直接的方法呢？ Array.prototype.filter 将创建一个新数组，省略值谓词返回 false for。

const deleteItem = (itemToRemove: string) => {
  setState((previous) => {
    return previous.filter(item => item !== itemToRemove);
  });
};

Answer 2

您无需在 setState 中再次设置状态，因为您已经根据先前的状态返回了更新后的状态值。更新删除函数为

const deleteItem = (item: string) => {
    let newItem: string[] = [];
    setState((prev) => {
      newItem = [...prev];
      newItem.splice(newItem.indexOf(item), 1);
      return newItem;
    });
  };

还尝试使用有意义的名称作为状态变量。

Answer 3

不要在另一个 setState 中执行 setState。

除了@NeERaJ TK 的答案之外，还有一个更简单的解决方案。

const deleteItem = (item: string) =>
  setState(prev => prev.filter(currItem => currItem !== item));

使用 useState 钩子时，打字稿抱怨类型

3 个答案: