javascript - 如何将返回传递的数据传递回组件以在html中显示

Question

好吧，我有一个文件，它在一个单独的文件中有一堆实用函数，例如:

const imprGuid = () => {
  data.map((result) => {
    return result.request.requestContext.mpcBidRequest.imprGuid;
  });
};

我的主要 index.js 组件是这样的

const IndexPage = () => {
  return (
    <Layout>
      <main>
        <section id='request' className={sectionStyles}>
          <h2 className={h2Styles}>request</h2>
          <div className='mt-5 flex justify-around'>
            <Btn onClick={() => imprGuid()}>sspBidFloor</Btn>
            <Btn onClick={() => console.log('button was clicked')}>geoData</Btn>

我有一个按钮用户界面。这将分别调用 ultil 函数 onClick。调用该函数后，我想在 UI 中显示结果，但我似乎无法理解两件事。

1. 如何在用户界面中显示返回的数据。我已经导入它并在 onClick 上使用了它，但我如何才能在其他地方显示返回的内容？
2. 如何根据单击的按钮更改显示的内容...例如，我单击一个按钮以显示某些内容我单击另一个按钮我想用新的替换以前的按钮。

更新:

我已经添加了 useState 但返回值仍然没有显示。

const IndexPage = () => {
  const [data, setData] = useState();
  ...

点击按钮是

<Btn onClick={() => setData(imprGuid())}>sspBidFloor</Btn>

util 函数现在是:

const imprGuid = () => {
  data.map((result) => {
    let imprGuid = result.request.requestContext.mpcBidRequest.imprGuid;
    console.log(imprGuid);
    return imprGuid;
  });
};

并且我将数据放入 {data} 之类的组件中，但没有出现任何内容，但结果打印到控制台很好。所以我猜它会返回数据好吗？

---

进一步更新。

{data.map((result, i) => (
            <>
              {i}: {result}
              <br />
            </>
          ))}

我现在无法读取未定义的属性“ map ”。但是修复工作了，然后我刷新了，现在它返回未定义...状态和功能没有改变:(

Answer 1

正如安迪所说，imprGuid函数不返回任何内容，这就是它不起作用的原因。

下面的函数应该可以解决您的问题:

const imprGuid = () => {
  return data.map(result => result.request.requestContext.mpcBidRequest.imprGuid);
};

要在每个元素之间添加分隔线，您可以使用 <br/>标签。

<code>
  {(data || []).map(el => <>el<br/></>)}
</code>