React:如何更改道具值

Question

在我的代码中，我替换这些值

const [items, setItem] = useState<string[]>([]);
const [value, setValue] = useState('')
const [error, setValue]= useState('')

到这个

类型道具={项目？：字符串[]，值？：字符串，错误？：字符串}

然后更改以下设置项，设置值，设置值，这会导致以下错误

import React, { useRef, useState } from "react";
import ReactDOM from "react-dom";
import Chip from "@material-ui/core/Chip";
import TextField from "@material-ui/core/TextField";

type Props = {
  items?: string[],
  value?: string,
  error?: string
}

export const TagActions = (props:Props) => {
    const { items, value, error } = props;

    // const [items, setItem] = useState<string[]>([]);
    // const [value, setValue] = useState('')
    // const [error, setError]= useState('')
    
    const divRef = useRef<HTMLDivElement>(null)

    const handleDelete = (item:any) => {
        console.log("handleDelete", item)
        const result = items?.filter(i => i !== item)
        setItem(result)
      };
    
    const handleItemEdit = (item:any) =>{
        console.log("handleItemEdit", item)
        const result = items?.filter(i => i !== item)
        
        items = result    // setItem(result)
        value = item     // setValue(item)

        console.log("value", value)
        
    };

    const handleKeyDown = (evt:any) => {
        if (["Enter", "Tab", ","].includes(evt.key)) {
          evt.preventDefault();

          var test = value?.trim();
    
          if (test && isValid(test)) {
            items?.push(test)
            setValue("")
           
          }
        }
    };

    const isValid = (email:any)=> {
        let error = null;
    
        if (isInList(email)) {
          error = `${email} has already been added.`;
        }
    
        if (!isEmail(email)) {
          error = `${email} is not a valid email address.`;
        }
    
        if (error) {
            setError(error);
    
          return false;
        }
    
        return true;
    }

    const isInList = (email:any)=> {
        return items?.includes(email);
      }
    
    const isEmail = (email:any)=> {
        return /[\w\d\.-]+@[\w\d\.-]+\.[\w\d\.-]+/.test(email);
    }

    const handleChange = (evt:any) => {
        setValue(evt.target.value)
        // setError("")
        
    };

    const handlePaste = (evt:any) => {
        evt.preventDefault();
    
        var paste = evt.clipboardData.getData("text");
        var emails = paste.match(/[\w\d\.-]+@[\w\d\.-]+\.[\w\d\.-]+/g);
    
        if (emails) {
          var toBeAdded = emails.filter((email:any) => !isInList(email));
            
            setItem(toBeAdded)
        
        }
    };
    


    return (
        <>
          <div>
          <TextField id="outlined-basic" variant="outlined"
          InputProps={{
            startAdornment: items?.map(item => (
              <Chip
                key={item}
                tabIndex={-1}
                label={item}
                onDelete={() => handleDelete(item)}
                onClick={() => handleItemEdit(item)}
              />
            )),
  
          }}
            ref={divRef}
            value={value}
            placeholder="Type or paste email addresses and press `Enter`..."
            onKeyDown={(e) => handleKeyDown(e)}
            onChange={(e) => handleChange(e)}
            onPaste={(e) => handlePaste(e)}
          />
          </div>
  
          {error && <p className="error">{error}</p>}
        </>
      );
}

我是 react 打字稿的初学者，所以我不知道如何解决这个问题，请给我一个解决这个问题的解决方案

Answer 1

虽然将const更改为let可能会修复控制台中的即时错误，但我怀疑这会给您带来所需的行为。

这里的主要问题是您正在改变props的值，通常您不应该这样做。Props用于将有状态数据从父组件向下传递到子组件。如果您希望从子组件更新此数据的状态，您也应该使用props传递一个更新函数。下面通过实现删除项函数（没有打字稿，但希望它能传达这个想法）来说明我的意思：

const ParentComponent = () => {
  const [items, setItems] = useState(["item1", "item2", "item3"])
  
  const deleteItem = (itemToDelete) => {
    //here we use the functional update form of setState which is good practise when the new state depends on the old state
    setItems((items) => items.filter((item) => item!==itemToDelete))
  }
  
  return <ChildComponent items={items}, onDeleteItem={deleteItem} />
}

const ChildComponent = ({items, onDeleteItem}) => {

  //e.g. to delete item2 call
  onDeleteItem("item2")
}

这是React中比较令人困惑的模式之一，但是让你的头脑清醒是非常重要的。只有声明状态的组件才应该真正更新该状态——因为它是您唯一可以访问setState函数的地方。