标签: reactjs

我有一个简单的上下文，它设置从后端伪代码获取的一些值：

export const FooContext = createContext();

export function Foo(props) {
    const [value, setValue] = useState(null);

    useEffect(() => {
        axios.get('/api/get-value').then((res) => {
            const data = res.data;
            setValue(data);
        });
    }, []);

    return (
        <FooContext.Provider value={[value]}>
            {props.children}
        </FooContext.Provider>
    );
}

function App() {
    return (
        <div className="App">
            <Foo>
                <SomeView />
            </Foo>
        </div>
    );
}

function SomeView() {
    const [value] = useContext(FooContext);
    
    console.log('1. value =', value);
    
    const myFunction = () => {
        console.log('2. value = ', value);
    }
    
    return (<div>SomeView</div>)

有时我会得到：

1. value = …

如何getStaticProps()为所有页面复制 nextjs 函数，而不必重复所有页面？

这些是我的页面和布局组件。我想为所有页面添加全局功能，可以吗？可以添加一个全局getStaticProps函数吗？

索引.tsx

import Link from 'next/link';\nimport Layout from '../components/Layout';\nimport {InferGetStaticPropsType} from 'next';\n\nfunction Index({data}: InferGetStaticPropsType<typeof getStaticProps>) {\n  return (\n    <Layout\n      title="P\xc3\xa1gina - Home"\n      description="desenvolvimento web, web development, constru\xc3\xa7\xc3\xa3o de sites"\n      title_meta="desenvolvimento web, web development, constru\xc3\xa7\xc3\xa3o de sites"\n      description_meta="desenvolvimento web, web development, constru\xc3\xa7\xc3\xa3o de sites"\n      site_name="Rafael Web development"\n      url="http://localhost:3000/"\n      images={data}>\n      <div>\n        <h1>Hello Next.js INDEX</h1>\n        <Link href="/sobre">\n          <a>About</a>\n        </Link>\n        <main></main>\n      </div>\n    </Layout>\n  );\n}\n\nexport const getStaticProps = async () => {\n  const res = …

就我而言，我有这样的事情：

<div className="projects">
  {getProjectList().map(p => (
    <Link key={p.id} 
          className='project' 
          to={`/project/${p.id}`} 
          style={{border: '2px solid red'}}
    >
        #{p.id} - {p.name}
        <div className="helpers">
          <Button
            icon="trash"
            size="mini"
            color="red"
            onClick={e => {
              e.preventDefault();
              e.stopPropagation();
              setDeleting(p);
            }}
          />
          <Button
            size="mini"
            color="red"
            as={Link}
            to={`/edit/${p.id}`}
          >Edit</Button>
        </div>
    </Link>
  ))}
</div>

视觉上表示如下：

我更愿意保持这样，因为它按预期工作。

为什么我想要这样的附加解释：我想向用户提供用鼠标右键单击两个链接并选择“在新选项卡中打开链接”的能力。导航到项目的详细信息，并导航到编辑表单以更改项目的属性（这是两个不同的页面）。

但在这种情况下，我有两个相互嵌入的时间标签，并且 React 生成：

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

有什么方法可以抑制吗？

我是 React js 的新手。我正在使用 React js 构建一个 4-5 页的网站。在所有的页面中，都有一个叫做category的API。请求此 API 一次并在需要的所有页面上使用相同数据的最佳方式是什么？我尝试在 google 上查找，但没有得到满意的结果，因此您的指南将有助于节省客户端资源，以便一次又一次地为每个组件或页面调用相同的 API。

多谢！！！

我正在尝试用 React 重新创建一个类似记忆的游戏。我正在使用 Redux Toolkit 进行状态管理，但我在处理一个用例时遇到了问题。

在 selectCard 操作中，我想将所选卡添加到商店，并检查是否已选择其中 2 张。如果是这样，我想selected在延迟后清空数组。

const initialState : MemoryState = {
    cards: [],
    selected: [],
}

const memorySlice = createSlice({
    name: 'memory',
    initialState: initialState,
    reducers: {        
        selectCard(state: MemoryState, action: PayloadAction<number>) {
            state.selected.push(action.payload);
            if (state.selected.length === 2) {
                setTimeout(() => {
                    state.selected = [];
                }, 1000);
            }
        }
    }
});

卡片被选择得很好，但是当我选择 2 时，1 秒后我收到此错误：

TypeError: Cannot perform 'set' on a proxy that has been revoked， 在线上state.selected = [];

我是这个东西的新手，如何在延迟后访问状态？我必须异步执行吗？如果是这样，怎么办？

我尝试将前端安装到/with app.mount，但这会使我的所有/api路由无效。我还尝试了以下代码将文件夹安装到/static各自的路由中并index.html在以下位置提供文件/：

@app.get("/")
def index():
    project_path = Path(__file__).parent.resolve()
    frontend_root = project_path / "client/build"
    return FileResponse(str(frontend_root) + '/index.html', media_type='text/html')

static_root = project_path / "client/build/static"
app.mount("/static", StaticFiles(directory=static_root), name="static")

这大部分有效，但client/build文件夹中包含的文件未安装，因此无法访问。我知道 Node.js 有一种通过相对路径为前端页面提供服务的方法res.sendFile("index.html", { root: </path/to/static/folder });。FastAPI 中是否有等效的函数可以执行此操作？

我有应用程序，我需要保留搜索历史记录，我认为Map这里适合：

const [searchHistory, setSearchHistory] = useState(new Map());

要更新它，setSearchHistory(new Map([[text, result.repos]]));但它会用新地图替换地图，您能告诉我如何为状态初始化的地图添加值吗？

我正在尝试增加图例标签和图表之间的间距reactjs，我寻找了不同的解决方案，但大多数都是使用普通js。我已根据此答案将其添加到我的图表选项中

  const DoughnutOptions = {
    plugins: [
    {
      beforeInit: function (chart, options) {
        chart.legend.afterFit = function () {
          this.height = this.height + 50;
        };
      }
    },
      {
        labels: {
          render: "percentage",
          fontColor: ["black", "white"],
        },
      },
    ]
   }

  return (
         <Doughnut
            data={DoughnutData}
            options={DoughnutOptions}
          />
       )

但它不起作用，我在这里错过了什么吗？

我正在学习 Next.js 进行 Web 开发，并且遇到了commerce，这是一个用 Next.js 编写的电子商务网站的样板。当我浏览代码时，我发现了使用React Aria来创建叠加层的Sidebar组件。

我想在自己的项目中使用这部分，因此编写了一个Overlay也使用该OverlayContainer组件的组件。

import { useRef } from 'react';

import {
    useOverlay,
    useModal,
    OverlayContainer
} from '@react-aria/overlays';

const Overlay = ({ className, children, open = false, onClose }) => {
    const ref = useRef(null);

    const { modalProps } = useModal();

    let { overlayProps } = useOverlay({ onClose: onClose, open: open, isDismissable: true }, ref);
    return (
        <OverlayContainer>
            <div
                {...overlayProps}
                {...modalProps}
                ref={ref}
            >
                {children}
            </div> …

我想通过以下方式从查询参数创建一个 url：

 router.push(
      {
        pathname: '/cars',
        query: colors + type + price,

      },
      undefined,
      {
        shallow: true,
      },
  );

const colors = ['red', 'blue', 'yellow']; //the arrays could contain many others values
const type = ['offroad', 'sport'];
const price = 'hight'  //this is a string

我想实现，当我单击触发的按钮时router.push，下一个： /cars?color=red,yellow,blue&type=offroad,sport&price=hight