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>

My problem is that when I click on my button it should set the setRows and update my grid. Currently I need to click twice for it to work. I am unable to figure out the exact issue.

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

  };