如何将React有状态组件转换为无状态组件并实现接口请求与渲染

你需要借助React提供的useRef、useState两个Hook实现对应功能，完整的转换后代码如下：

import React, { useRef, useState } from "react";

function MyComponent() {
  // 对应类组件的createRef，用于获取input输入值
  const myRef = useRef(null);
  // 对应类组件的state，分别存储接口返回数据数组和无结果标识
  const [array, setArray] = useState([]);
  const [noresults, setNoresults] = useState(false);

  const loadData = () => {
    const data = myRef.current.value;
    const url = "someurl="+data;
    if(!data) return;
    fetch(url)
      .then(res => res.json())
      .then(json => {
        if(json.data.length > 0) {
          setArray(json.data);
          setNoresults(false);
        } else {
          setNoresults(true);
        }
      })
  }

  return (
    <div>
      <section>
        <input ref={myRef} type="number"/>
        <button onClick={loadData}>Click Here</button>
      </section>

      <ul>
        {array.map(e => (
          <li key={e.key}>{e.data}</li>
        ))}
      </ul>

      {noresults && <div>No Records</div>}
    </div>
  );
}

export default MyComponent

对应逻辑说明：

• 用useRef给input元素绑定引用，点击按钮时就可以通过myRef.current.value拿到当前输入框的内容，传入拼接的请求URL中发起接口调用
• 接口返回的数据通过useState声明的状态存储，数组状态更新后会自动触发组件重渲染，直接沿用类组件中array.map的逻辑就可以渲染出对应的li列表
• 无结果的提示也和类组件逻辑一致，通过noresults状态控制是否渲染即可。

内容的提问来源于stack exchange，提问作者Learner