React首次调用useState设置上传文件名后UI未更新显示问题求助

问题核心原因&修复方案 #

你代码中存在多个逻辑和语法错误，直接导致首次选择文件后名称不展示：

• 异步执行顺序错误：saveFile是文件上传异步操作，你调用完saveFile立刻执行getFileNames，此时文件还没完成上传到服务端，第一次请求拿到的还是上传前的空数据。第二次选择文件时，第一次上传的文件已经落库，所以能拿到历史文件，此时第二次上传刚好完成，所以看起来表现正常。
• fetch调用语法错误：第一个then的写法是.then( res => { res.json() })，箭头函数加了大括号后没有手动返回res.json()，导致后续then拿到的resJson是undefined，无法正确赋值给fileNames。
• 初始值类型错误：你给fileNames的初始值是{}空对象，而对象没有map方法，第一次渲染/赋值前调用fileNames.map会直接抛出错误，导致列表不渲染。
• 其他语法错误：
  • handleFileChange的参数是e，你用了未声明的event变量拿文件列表
  • saveFile的调用括号写错，参数没放到括号内
  • 渲染文件名时错误调用file.showName(file)，showName是组件内的全局函数，不是file对象的方法

修复后完整代码 #

const MyComponent = (props) => {
  // 初始值改为空数组，匹配后端返回的列表类型
  const [fileNames, setFileNames] = useState([]);

  const getFileNames = (objectId) => {
    const input = { objectId: objectId };

    fetch(service(), {
      method: "PUT", 
      headers: {
        // 此处保留你原有的其他header配置
        "Content-Type": "application/json"
      },
      body: JSON.stringify(input)
    })
    // 去掉大括号隐式返回res.json()，避免后续拿不到返回值
    .then(res => res.json())
    .then(resJson => {
      if (resJson?.error) {
        // 保留原有的错误处理逻辑
        console.log(resJson.error)
      } else {
        setFileNames(resJson.results);
      }
    })
    .catch(err => console.log(err))
  }
  
  const handleFileChange = (e) => {
    // 修正参数和调用括号，确保saveFile入参正确
    // 等待saveFile上传完成后再调用获取文件名接口，保证数据已更新
    saveFile(e.target.files, props.objectId, props.somethingelse)
      .then(() => {
        getFileNames(props.objectId);
      })
  }
    
  const showName = (file) => {
    return (
      <span> {file.name} </span>
    )
  }
    
  return (
    <div>
      <Form.Control 
        type="file" 
        multiple
        onChange={e => handleFileChange(e)}
        {/* 此处保留你原有的其他配置 */}
      />
      {/* 修正showName调用方式 */}
      {fileNames.map(file => showName(file))}
    </div>
  )
}

注：如果saveFile本身不返回Promise，需要先修改saveFile的实现，让它在文件上传完成后resolve，才能保证后续获取文件名的请求拿到最新数据。

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