Question

我正在创建一个搜索栏，该搜索栏调用API以返回具有匹配名称的设备列表。理想情况下，当用户第一次查看组件时，它只会看到一个搜索栏。用户在搜索栏中键入内容后，API将返回匹配名称的列表。这些名称的列表随后显示在搜索栏下方。

我正在尝试使用钩子来执行此操作，但是我无法显示列表/无法更新组件并显示新列表。

我想念的是什么，这是解决这个问题的正确方法吗？

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

将设备存储在状态下，然后直接在返回中进行地图渲染，如下所示：

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>
  );
};

当道具或状态更改时，组件将仅重新渲染，因此useEffect不能在不更新某些状态的情况下触发重新渲染

使组件在使用时重新渲染

1 个答案: