时间戳

首页 > 解决方案 > 如何将返回传递的数据传递回组件以在 html 中显示

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

问题描述

好的，所以我有一个文件，它在一个单独的文件中包含一堆实用程序函数，例如：

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>

我有一个按钮 UI。它将分别调用 ultil 函数 onClick。调用该函数后，我想在 UI 中显示结果，但是我似乎无法将头绕在两件事上。

  1. 如何在 UI 中显示返回的数据。我已经导入了它并在上面使用了它，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 />
            </>
          ))}

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

标签： javascriptreactjs

解决方案

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

下面的功能应该可以解决您的问题：

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

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

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

推荐阅读