react hooks回调函数需要被单击两次

问题描述

我有一个跟随JSX，它的行为很怪异。我需要单击两次按钮以更新setRows挂钩。

  const [rows,setRows] = useState([]);
  const [fileName,setfileName] = useState('test.txt');

  const handleFilenameClick = (e) => {
    e.preventDefault();
    setfileName(e.target.value);
    async function anyNameFunction() {
      const response = await axios.get(`/api/files/fileData/${fileName}`);
      setRows(response.data);
    }
    anyNameFunction();

  };

   <div className="list-group list-group-flush">
      {fileNames.map((file) => {
        return <input type="button" className="bg-light" onClick={handleFilenameClick} value={file}></input>
      })}
    </div>

我的问题是，当我单击按钮时，它应该设置setRows并更新我的网格。目前，我需要单击两次才能使其正常工作。我无法找出确切的问题。

解决方法

const handleFilenameClick = (e) => {
    e.preventDefault();
    setfileName(e.target.value);
    async function anyNameFunction() {
      // use `e.target.value` directly because `setfileName` is async. 
     // so every time when you use it,you will always get it's previous value
      const response = await axios.get(`/api/files/fileData/${e.target.value}`);
      setRows(response.data);
    }
    anyNameFunction();

  };