Javascript 状态改变后正确重新触发功能（React）

（这里是React/JS新手！）

嗨

我有一个组件，它正在呈现一些关于报告的数据。其中一个字段是报告执行的时间。在我的API中，我有一个外键，所以页面上呈现的值是id号。由于无法从API触发字符串表示，我决定在前端进行某种映射。想法是在组件中使用“getKey”函数来显示此字符串表示：

import React, { useState } from "react";

const ReportElement = ({ report, setReportUpdated, reportingPeriods }) => {
  const getKey = (object, value) => {
    return Object.keys(object).find((key) => object[key] === value);
  };


  const reportForUpdated = () => {
    setReportUpdated(report);
    console.log(report);
  };

  return (
    <tr key={report.id}>
      <td>{report.report}</td>
      <td>{report.reporting_period}</td>
      <td>{report.executed}</td>
      <td>{getKey(reportingPeriods,report.executed_on)}</td>
      <td>{report.on_time}</td>
      <td>{report.issues}</td>
      <td> {report.issues_description}</td>
      <td>
        <button className="update-status" onClick={reportForUpdated}>
          UPDATE STATUS
        </button>
      </td>
    </tr>
  );
};

export default ReportElement;

我将道具传递给具有一些属性的函数，其中一个属性是id。“报告”的状态在更新所有报告状态的不同组件中更改：

编辑2：

示例-我从一个API中得到50 as report.executed_

因此，根据以下代码：

<td>{getKey(reportingPeriods,report.executed_on)}</td>

{getKey（reportingPeriods，report.executed_on）}

我想从我在getKey函数中创建的“映射”中获取“BD 2021年4月5日”

---

此时-我的表中的所有行都在提取正确的字符串（因此BD 5、BD 6等），但当其中一行被更新时（例如，我将report.executed_on更改为55）-ReportElement组件中的所有数据都处于相同的状态，但这个td标记最终为空。我必须再次获取数据以查看发生的更改（Python后端已更新，显示为55，因此post方法似乎正在工作。与我在开发人员工具中看到的组件相同，状态已更新为55，但在我再次触发从后端获取数据以显示之前，该组件不可见）.

使用useEffect获取功能组件中的数据

useEffect(() => {
console.log(yourProp)
}, [yourProp])

---

这样，useEffect将监视yourProp道具中的任何更改。使用空数组（在useEffect中）意味着useEffect将仅在功能组件的第一次渲染中触发。这意味着它不会在任何道具更改中触发。

发现了我的问题

setReports中的状态更改需要更改

最初是：

 setReports(
      reports.map((report) => (report.id === id ? reportUpdated : report))
    );

它仅在找到要更改的元素id的位置更新值

现在我有以下资料：

setReports(
      reports.map((report) =>
        report.id === id
          ? {
              ...reportUpdated,
              executed_on: parseInt(reportUpdated.executed_on),
            }
          : report
      )
    );

我使用spread运算符查看更新，并注意到“executed_on”属性得到的是一个字符串而不是一个整数，它与我的ID是整数不匹配。通过使用parseInt和now纠正了这一点-效果很好

也许有人会遇到类似的问题，所以我张贴我的解决方案

---

保重

代码段中的组件没有状态，也没有映射任何数据。“您的问题中是否包含了所有相关代码？谢谢您指出可能遗漏了一些内容，”Drew Reese说。不确定附加注释是否有帮助，但我在问题中添加了一个“编辑”部分。在状态更新后，您希望触发哪个函数，以及您希望触发哪个状态/值更新？您的问题/议题仍然不清楚。添加了编辑2并解释了我想看到的内容，@Drew Reese。谢谢您的建议，Martin。我检查了什么控制台正在记录日志，状态似乎已更改。不幸的是，我的getKey函数没有在重新呈现组件时被正确触发，结果是空值而不是更新状态。Myabe我编写函数（或启动函数）的方式是错误的。我必须考虑一下。嗯，这是（几乎）更新嵌套属性的标准方法。在您最初遇到问题的代码和更新的编辑之间没有足够的上下文，更新的编辑包含了一些

Update

组件，用于连接您正在更新的状态与原始代码段有关的点。我猜在这里发布一个问题有助于我从不同的角度看待问题。如果有什么不清楚的地方-抱歉搞混了。我会尽我最大的努力在下次寻求支持时更加精确。不用担心，通过练习，我们在提出更好的问题、提供可接受的上下文、回答问题等方面会做得更好。。。祝你好运

 setReports(
      reports.map((report) => (report.id === id ? reportUpdated : report))
    );

setReports(
      reports.map((report) =>
        report.id === id
          ? {
              ...reportUpdated,
              executed_on: parseInt(reportUpdated.executed_on),
            }
          : report
      )
    );