Question

我目前正在建立一个基于英雄联盟（MOBA或多人在线战斗竞技场游戏）基于搜索的网络应用程序，该网络应用程序实质上允许用户搜索其召唤者的名字并获得有关其搜索输入的一般信息。（数据由游戏自己的第三方api提供）

我已经能够成功检索表单数据并执行预期的后端处理，但是，在客户端进行初始渲染时，我的结果列表组件已经在尝试获取不存在的已处理数据。

如何防止在服务器实际成功提供数据之前触发服务器请求？

（简化的单组件客户端示例）

召唤者数据终结点设置为http://localhost:3001/api/summoner
服务器不包含任何其他路由

const App = () => {
  const [summName, setSummName] = useState('');
  const summonerFormData = new FormData();
  //  let data;

  const findSummoner = () => {
     summonerFormData.set('summonerName', summName);
  }

  // problem here

  const data = axios.get('http://localhost:3001/api/summoner');

  // axios.get('http://localhost:3001/api/summoner')
  //   .then(res => {
  //     data = res;  
  //   });

  return (
    <div>
      <form
        method="POST"
        action="http://localhost:3001/api/summoner"
        onSubmit={findSummoner}
      >
        <input 
          value={summName} 
          name="summName" 
            onChange={e => setSummName(e.target.value)}
        />
        <button type="submit">submit</button>
      </form>

      {data !== undefined &&
        <div className="results">
          data.map(match => {
            <div>
              <p>{match.kills}</p>
              <p>{match.deaths}</p>
              <p>{match.assists}</p>
            </div>
          })
        </div>
      }
    </div>
  )
}

这里是Repo，为您提供了更多背景信息，但请随时询问您是否需要更多信息或有任何疑问！

我非常感谢我能获得的任何帮助！

谢谢！

编辑：

我还尝试过使用useEffect挂钩，考虑到我要获取的生命周期点将是componentDidMount，但还不确定解决方案是什么。做更多的atm研究！
关闭，但没有雪茄。请求陷入“待处理”状态。

  let data;

  const fetchData = () => {
    axios.get('http://localhost:3001/api/summoner');
  };

  useEffect(() => {
    if (summName !== '') {
      fetchData();
    }
  }, summName);

我尝试将axios请求放入异步函数中，然后等待请求响应，这似乎正在起作用，但是，当客户端启动时，服务器仍在接收未定义的消息，然后尝试获取该消息，从不兑现诺言。

const fetchData = async () => {
  await axios
    .get('http://localhost:3001/api/summoner')
    .then(res => {
      data = res;
    })
    .catch(() => {
      console.log('error');
    });
};

useEffect(() => {
  fetchData();
}, [])

所以我接受了@imjared和@HS的建议和建议，我真的很亲近。.

我还有一个问题...我的数据映射组件试图在实际接收到不存在的数据之前先映射不存在的数据，这给我一个错误，它无法映射未定义的匹配项。

  const [modalStatus, setModalStatus] = useState(false);
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState({ hits: [] });
  const [summName, setSummName] = useState('');
  const [summQuery, setSummQuery] = useState('');
  const summonerFormData = new FormData();
  const prepareResults = async () => {
    await setSummQuery(summName);
  };

  const findSummoner = async () => {
    setLoading(true);
    setModalStatus(false);
    await summonerFormData.set('summonerName', summQuery);
  };

  useEffect(() => {
    const fetchData = async () => {
      if (summQuery) {
        setData({ hits: [] });
        console.log('fetching');
        await axios
          .get('http://localhost:3001/api/summoner')
          .then(res => {
            setData(res.data);
            setLoading(false);
            setModalStatus(true);
            return data;
          })
          .catch(error => {
            console.log(error);
          });
      }
    };

    fetchData();
  }, [summQuery]);

成功！感谢大伙们！这就是对我有用的东西：

const findSummoner = async () => {
  setSummQuery(summName);
};

useEffect(() => {
  setData({ hits: [] });
  summonerFormData.set('summonerName', summQuery);

  const fetchData = async () => {
    setModalStatus(false);
    setLoading(true);

    if (summQuery !== '') {
      setLoading(true);
      console.log('fetching');
      await axios
        .get('/api/summoner')
        .then(res => {
          setData({
            hits: res.data,
          });
          setError(false);
          setLoading(false);
          setModalStatus(true);
          return data;
        })
        .catch(() => {
          setError(true);
          console.log('error');
        });
    }
  };

  if (summQuery !== '') {
    fetchData();
  }

}, [summQuery]);

Answer 1

此流程将帮助您进行更好的设计-

1. User - input 
2. Hit - search
3. Set loading in state - true,
5. Set data in state - empty
6. Call api
7. Get data
8. Then, set data in state
6. Set loading in state - false

沿渲染/返回的一侧-

1. if loading in the state - indicate loading.
2. if loading done( false ) and data is not empty - show data.
3. if loading done and data is empty - indicate 'not-found'.

来到最初的渲染部分-axios.get()调用api，只有在提交案例时才应启动api。因此，应在事件处理程序内部移动该逻辑。

仅在成功接收并提供（回复）表单提交的数据后，才如何获取（快速）数据？

1 个答案: