小编Dan*_*des的帖子

我正在做一些反应，并遇到了一个我无法解决自己的挑战。我在这里和其他地方搜索过，发现了标题相似的主题，但与我遇到的问题没有任何关系，所以我们开始：

所以我有一个数组，它将被映射到 React 组件中，通常如下所示：

export default ParentComponent = () => {

//bunch of stuff here and there is an array called arr

return (<>
 
    {arr.map((item, id) => {<ChildComponent props={item} key={id}>})}

</>)

}

但问题是，父元素中有一个状态，它存储当前选定的子组件之一的 id（我通过设置上下文并在子组件内设置此状态来做到这一点），然后问题是我必须引用当前选定的 ChildComponent 内部的节点。我可以毫无问题地转发引用，但我也想仅在当前选定的 ChildComponent 上分配引用，我想这样做：

export default ParentComponent = () => {

//bunch of stuff here and there is an array called arr and there's a state which holds the id of a  selected ChildComponent called selectedObjectId

const selectedRef = createRef();

return (<>
    <someContextProvider>
    {arr.map((item, id) => …

我正在尝试使用 Next.js 为自己编写一个基本的本地 api，它是一个时间线生成器，我一直在从 api 文件夹中实际读取文件。

我在本地应用程序中想要什么：

1.一个简单的页面，我可以在其中输入一个事件，带有日期和描述

2.在某处打开一个 list.json 文件，然后将新事件推送到该 json 文件，并在其上写入。

我目前在做什么以及我被困在哪里：

我知道我们不能在客户端写入文件，所以我开始查看下一个 js 中的 api 路由以访问 JSON 文件，但我什至无法读取它！

我在 pages 文件夹中有一个 api 文件夹，在这个 api 文件夹中我有两个文件：一个是 list.json 文件，我之前在其中手动编写了一些具有各自日期的事件；另一个是 getlist.js，代码如下：

var fs = require('fs');

export default function getList(req, res) {
    const rawList = fs.readFile('list.json');
    var list = JSON.parse(rawList);
    res.json(list);
}
  

现在在 pages 文件夹中，我有一个 index.js 文件，我尝试使用 getStaticProps() 访问这个 getlist.js api，如下所示：

import getlist from './api/getlist'

export async function getStaticProps(){

    var list = getlist();

    return {
        props: {
            list
        }
    }
} …

我相信我在代码中采用了错误的方法，如何在按钮单击中设置客户端首选项，该按钮单击用作全局 astro 组件中的道具？或者我应该怎么做？我知道这是可能的，因为 astro js 本身在他们的文档网站中这样做了！（下面是我的尝试的解释）

我目前正在开发一个 Astro Js 项目，这是我的个人作品集，我希望它向访问者展示一个选择首选语言的选项，所以最初我在所有 astro 组件中传递了一个语言属性。因此，我尝试在索引或布局文件中创建一个按钮，我的所有组件都会在其中接收其道具，以更改此值，但我很快意识到这不是应该如何完成的：

index.astro：（错误）

---
let lang = "pt-br";
---
<div id="langBtn">
  <span id="brbtn">BR</span><span>|</span><span id="enbtn">EN</span>
</div>
<Layout title="Daniel Folio" lang={lang}>
  <Hero lang={lang} />
</Layout>

<script>
  function handleClick() {
    if(lang === "pt-br") {
       lang = "en";
    } else {
       lang = "pt-br";
    }
  }
  document
    ?.getElementById("langBtn")
    ?.addEventListener("click", handleClick);
</ script>

我意识到我们无法在客户端访问或更改服务器端变量。因此，我尝试使用 Astro cookie 来检查语言 cookie 是否存在，否则创建一个，然后单击按钮时更改其值，但这也是不可能的，因为 Astro.cookies 在客户端不可用。