在 useEffect 上重新渲染组件

Question

I'm creating a search bar, which calls an API to return a list of devices with matching names. Ideally, when the user first looks at the component, it sees just a search bar. Once the user types in the search bar, the API returns a list of matching names. A list of these names is then shown below the search bar.

I'm trying to do this with hooks, but I can't get the list to show / the component to update and show the new list.

What am I missing, is this the correct way to go about this?

const Search = () => {
  const [input, setInput] = useState("");
  let devices = [];
  const handleChange = e => {
    setInput(e.target.value.toUpperCase());
  };
  useEffect(() => {
    apiService.getDevices(input).then(response => {
      console.log("response:", response); // This brings back the response correctly
      const newDevices = response.map(device => <li key={device}>{device}</li>);
      devices = <ul>{newDevices}</ul>;
    });
  }, [input]);

  return (
    <Fragment>
      <div>
        <div className="form-group">
          <div className="form-group__text">
            <input
              type="search"
              onChange={handleChange}
              placeholder="Search device by serial number"
            />
            <button type="button" className="link" tabIndex="-1">
              <span className="icon-search"></span>
            </button>
          </div>
        </div>
        <div>{devices}</div>
        <p>testestes</p>
      </div>
    </Fragment>
  );
};

Answer 1

Store devices in state, and then do the map rendering directly in the return, like so:

const Search = () => {
  const [input, setInput] = useState("");
  const [devices, setDevices] = useState([]);
  const handleChange = e => {
    setInput(e.target.value.toUpperCase());
  };
  useEffect(() => {
    apiService.getDevices(input).then(response => {
      setDevices(response);
    });
  }, [input]);

  return (
    <Fragment>
      <div>
        <div className="form-group">
          <div className="form-group__text">
            <input
              type="search"
              onChange={handleChange}
              placeholder="Search device by serial number"
            />
            <button type="button" className="link" tabIndex="-1">
              <span className="icon-search"></span>
            </button>
          </div>
        </div>
        <div>
          <ul>
            {devices.map(device => <li key={device}>{device}</li>)}
          </ul>
        </div>
        <p>testestes</p>
      </div>
    </Fragment>
  );
};

A component will only re-render when the props or state change, so a useEffect cannot trigger a rerender without also updating some state