react hooks回调函数需要点击两次

Question

我有一个追随者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 并更新我的网格。目前我需要点击两次才能工作。我无法弄清楚确切的问题。

Answer 1

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

  };