reactjs - useState 不重新渲染

Question

我有一个组件在状态变量更改时不会重新渲染，我不明白为什么。这是代码： -

export default function SalesItem(props) {
    const classes = useStyles();
    const api = new API();
    const [salesItem, setSalesItem] = React.useState(null);
    const [site, setSite] = React.useState(null);

    useEffect(() => {
        api.getSite(props.siteCode).then((site) => {
            setSite(site);
            api.getSalesItem(site.SiteID, props.salesItem).then((salesItem) => {
                setSalesItem(salesItem);
            })
        })
    }, [])

    return (
        <form className={classes.root} noValidate autoComplete="off">
            <Input
                defaultValue={salesItem === null ? "test" : salesItem.Description}
                inputProps={{ 'aria-label': 'description' }}
                fullWidth
                />
        </form>
        )
}

site 和 salesItem 的值确实发生了变化，但 Input 字段只显示“test”，这告诉我组件没有重新渲染，我不知道为什么。

标签： reactjsuse-state

Answer 1

您应该设置value而不是defaultValue：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [value, setValue] = useState("default value");

  const updateValue = (e) => {
    const newValue = e.target.value;

    if (newValue !== value) {
      setValue(newValue);
    }
  };

  return (
    <>
      <button onClick={() => setValue("foo")}>inject value "foo"</button>
      <button onClick={() => setValue("bar")}>Inject value "bar"</button>
      <input value={value} onChange={updateValue} />
      <p>Current value is: "{value}"</p>
    </>
  );
}

这是一个可以玩的 CodeSandbox。