阅读反应中的 excel 后，我的 excel(json) 数据未在使用状态（设置项）中更新

Question

因为我是这个项目的新手，所以任何人都可以帮助摆脱这个。

我已成功读取 excel 并将其转换为 JSON 之后，它在控制台中成功显示，但是当我在 setItems 中更新它以呈现数据时在 table 中，它没有得到更新。

我上传了我的代码，请检查。

  const [items, setItems] = useState([]);

  const readfiles = (file, e) => {
    const p = new Promise((resolve, reject) => {
      const filereader = new FileReader();
      filereader.readAsArrayBuffer(file);

      filereader.onload = (e) => {
        const bufferArray = e.target.result;
        const wb = XLSX.read(bufferArray, {
          type: "buffer",
        });
        const ws = wb.Sheets[wb.SheetNames[0]];

        const data = XLSX.utils.sheet_to_json(ws);
        resolve(data);
      };

      filereader.onerror = (error) => {
        reject(error);
      };
    });

    p.then((d) => {
      console.log("data", d);
      setItems(d);
      console.log(items)
    });
    };

在 console.log("data", d) 中它显示数据，但在 console.log(items) 中它什么也不显示。

enter image description here

这是我的 table jsx

  return (
    <div style={MainStyle}>
      <input
        type="file"
        onChange={(e) => {
          const file = e.target.files[0];
          readfiles(file);
        }}
      />

      <Container>
        <Table>
          <thead>
            <tr>
              <th>Time</th>
              <th>Territory name</th>
              <th>territory date</th>
            </tr>
          </thead>
          <tbody>
            {items?.map((d) => {
              <tr key={d.territory_name}>
                <td>{d.Hours}</td>
                <td>{d.territory_name}</td>
                <td>{d.timeoff_period}</td>
              </tr>;
            })}
          </tbody>
        </Table>
      </Container>
    </div>
  );

数据未在 table..

中呈现

Answer 1

React 挂钩是 异步的 ，这意味着您可能无法在通过 [=12] 设置 之后 立即访问数据=].

如果你真的想用它（不只是console.log()它），你可以利用useEffect，将状态作为第二个参数传递。更多关于 useEffect here.

编辑：对于你的第二个问题，你要么 return :

<tbody>
{items?.map((d) => {
  return (<tr key={d.territory_name}>
    <td>{d.Hours}</td>
    <td>{d.territory_name}</td>
    <td>{d.timeoff_period}</td>
  </tr>);
})}
</tbody>

或者您将 {} 替换为 () :

<tbody>
{items?.map((d) => (
  <tr key={d.territory_name}>
    <td>{d.Hours}</td>
    <td>{d.territory_name}</td>
    <td>{d.timeoff_period}</td>
  </tr>;
))}
</tbody>