React中useState存储CSV内容后仍为undefined的问题求助

我从本地上传CSV文件，尝试将文件内容存入useState（通过setFileContent）。调用setFileContent(contentObj)前打印contentObj能得到预期的对象数组，但在finally块中打印fileContent却为undefined，页面也提示无法对undefined执行map方法。请问为何contentObj未成功存入fileContent？

相关代码如下：

function App() {

  const [loading, setLoading] = useState(false)
  const [fileContent, setFileContent] = useState()
  const [filename, setFilename] = useState()

  const handleOnChange = (f) => {
    setLoading(true)

    try {
      const files = f.target.files;
      setFilename(files["0"].name)
      if (files) {
        Papa.parse(files[0], {
          complete: function (results) {
            let content = results.data.slice(1)
            let contentObj = content.map(c => ({
              "ID": c[0],
              "name": c[1],
              "lastname": c[2],
              "age": c[3],
              "address": c[4],
              "radius": c[5],
              "lat": c[6],
              "long": c[7],
            }))

            console.log(contentObj)
            setFileContent(contentObj)

          }
        })
      }

    } catch (e) {
      alert(e)
    } finally {
      setLoading(false)
    }
  };


  // function to calculate the middle points 
  var location = [15.47, 115.10]

  return (

    <Box sx={{ flexGrow: 1, backgroundColor: 'black' }}>
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 10, marginBottom: 10 }}>
        <Button variant="contained" component="label">
          Upload a File
          <input hidden accept=".csv" multiple type="file" onChange={handleOnChange} />
        </Button>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 10, marginBottom: 10, color: "white" }}>

        {filename}

      </div>

      <Grid container spacing={2}>

        <Grid xs={1}></Grid>
        <Grid xs={10}>
          <Card
            style={{
              borderRadius: 10,
              height: 600,
              overflowX: "none",
              overflowY: 'auto',
              marginBottom: 1000,
              marginTop: 20
            }}
            variant='outlined'
          >

            {loading ? <CircularProgress /> : <div>
              <MapContainer center={location} zoom={6} scrollWheelZoom={true}>
                <TileLayer
                  url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
                />
                {fileContent && fileContent.map(e => (
                  <Circle
                    center={[e.latitude_deg, e.longitude_deg]}
                    pathOptions={{ color: 'red' }}
                    radius={e.accuracy_level == "HIGH" ? 5000 : e.accuracy_level == "MEDIUM" ? 15000 : 30000}>
                  </Circle>


                ))}

              </MapContainer>
            </div>}
            
          </Card>

        </Grid>
        <Grid xs={1}></Grid>

      </Grid>
    </Box>
  );
}

export default App;

原因分析 #

1. 异步执行顺序问题：Papa.parse是异步操作，complete回调会在文件解析完成后才触发，但finally块会在try中的同步代码执行完毕后立刻运行——此时setFileContent还没被调用，fileContent仍保持初始的undefined。
2. React状态更新的异步性：即使setFileContent被调用，React的状态更新是异步的，调用后无法立刻拿到更新后的fileContent值。
3. 字段名不匹配：渲染时map使用了e.latitude_deg、e.longitude_deg、e.accuracy_level，但contentObj中定义的字段是lat、long、radius，字段名不匹配导致即使状态存入成功，渲染时也无法获取正确值。

解决方案 #

1. 调整loading状态的更新时机 #

将setLoading(false)移到complete回调内，确保文件解析完成、状态更新后再结束加载：

complete: function (results) {
  let content = results.data.slice(1)
  let contentObj = content.map(c => ({
    "ID": c[0],
    "name": c[1],
    "lastname": c[2],
    "age": c[3],
    "address": c[4],
    "radius": c[5],
    "lat": c[6],
    "long": c[7],
  }))

  console.log(contentObj)
  setFileContent(contentObj)
  setLoading(false) // 移到此处
}

2. 修正字段名匹配问题 #

要么修改contentObj的字段名与渲染时一致：

let contentObj = content.map(c => ({
  "ID": c[0],
  "name": c[1],
  "lastname": c[2],
  "age": c[3],
  "address": c[4],
  "accuracy_level": c[5], // 对应渲染时的accuracy_level
  "latitude_deg": c[6],   // 对应渲染时的latitude_deg
  "longitude_deg": c[7],  // 对应渲染时的longitude_deg
}))

要么修改渲染时的字段引用与contentObj一致：

{fileContent && fileContent.map(e => (
  <Circle
    center={[e.lat, e.long]}
    pathOptions={{ color: 'red' }}
    radius={e.radius == "HIGH" ? 5000 : e.radius == "MEDIUM" ? 15000 : 30000}>
  </Circle>
))}

3. 初始化useState默认值 #

给fileContent设置默认空数组，避免初始undefined的问题：

const [fileContent, setFileContent] = useState([])

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