如何保存旧状态值反应

Question

我不想在更改功能组件中的一个时丢失我的其他状态。我知道如何在 class 组件中做到这一点，但你如何在功能中做到这一点？ Class 组件 this.setState({...this.state, somestate: somestate});

我的功能组件现在看起来像这样：

const [product, setProduct] = useState({});
  let { id } = useParams();

  useEffect(() => {
    let productFromLocalStorage = localStorage[id];
    setProduct(JSON.parse(productFromLocalStorage));
  }, [id]);

function handleName(event) {
    setProduct({name: event.target.value});
    // setName(event.target.value);
  }

return (
    <div style={styles.container}>
      <h1 style={styles.title}>Product {product.name} Edit Page</h1>
      <form style={styles.form} onSubmit={handleSave}>
        <label style={styles.label}>
          Name: <input value={product.name} type="text" onChange={handleName}></input>
        </label>
        <label style={styles.label}>
          EAN: <input value={product.ean} type="text" onChange={handleEan}></input>
        </label>
        <label style={styles.label}>
          Type: <input value={product.type} type="text" onChange={handleType}></input>
        </label>
        <label style={styles.label}>
          Weight:{' '}
          <input value={product.weight} type="text" onChange={handleWeight}></input>
        </label>
        <label style={styles.label}>
          Color:{' '}
          <input value={product.color} type="text" onChange={handleColor}></input>
        </label>
        <label style={styles.label}>
          Active:{' '}
          <input value={product.active} type="checkbox" onChange={handleActive}></input>
        </label>

        <input style={styles.submitButton} type="submit" value="SAVE"></input>
      </form>
    </div>
  );
function handleSave(event) {
    const productInfo = {
      name: product.name,
      ean: product.ean,
      type: product.type,
      weight: product.weight,
      color: product.color,
      active: product.active,
    };
    localStorage.setItem(id, JSON.stringify(productInfo));
    alert('Product: ' + name + ' edited!');
  }

我的产品状态有其他参数，如重量等...当我设置 setProduct({name: event.target.value});其他值变空。如何解决？

Answer 1

你正在做的是覆盖，所以就像你说的你需要保持当前值，所以这样做：

setProduct({...product, name: event.target.value})

Answer 2

您也可以通过 useState() 执行相同的操作，

const [product, setProduct] = useState({});
someHandler=(event)=>(
setProduct(product=>{
...product,
name:event.target.value
});
)

如何保存旧状态值反应

How to save old state values react

state

local-storage

reactjs

react-functional-component