Questions tagged «reactjs»

我试图弄清楚如何在React应用程序中显示Firestore时间戳。 我有一个Firestore文档，其中的字段名为createdAt。 我正在尝试将其包含在输出列表中（在此处提取相关位，以便您不必通读整个字段列表）。 componentDidMount() { this.setState({ loading: true }); this.unsubscribe = this.props.firebase .users() .onSnapshot(snapshot => { let users = []; snapshot.forEach(doc => users.push({ ...doc.data(), uid: doc.id }), ); this.setState({ users, loading: false, }); }); } componentWillUnmount() { this.unsubscribe(); } render() { const { users, loading } = this.state; return ( …

10 javascript  reactjs  firebase  google-cloud-firestore  unix-timestamp 

我正在使用使用ReactSwipableView包的Material ui SwipeableViews，在控制台上收到此错误 react-dom.development.js：12466警告：componentWillReceiveProps已重命名，不建议使用。有关详细信息，请参见。 将获取数据的代码或副作用移动到componentDidUpdate。 如果在道具更改时要更新状态，请重构代码以使用备注技术或将其移至静态getDerivedStateFromProps。了解更多信息： 将componentWillReceiveProps重命名为UNSAFE_componentWillReceiveProps以在非严格模式下禁止显示此警告。在React 17.x中，只有UNSAFE_名称起作用。要将所有已弃用的生命周期重命名为其新名称，可以npx react-codemod rename-unsafe-lifecycles在项目源文件夹中运行。 请更新以下组件：ReactSwipableView 有没有什么办法可以摆脱这个错误，我没有尝试过UNSAFE_componentWillReceiveProps但没有任何变化

10 reactjs 

我正在尝试使用Nginx和NodeJS服务器的Gzip传递压缩用Next.js编写的代码。 当我用于curl -H "Content-Encoding: gzip"验证时，似乎配置正在工作。 但是来到真正的浏览器（Chrome，Firefox）时，我无法Content-Encoding: gzip在Response Headers中找到该属性。 代替，X-Content-Encoding-Over-Network: gzip出现了。 我使用Google Lighthouse测试了该网站，但它责备我对文本文件启用压缩功能。 其实是什么X-Content-Encoding-Over-Network意思？ 我该如何使用gzip？ Nginx设置： gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.0; gzip_types text/css text/plain text/javascript application/javascript application/json application/x-javascript application/xml application/xml+rss application/xhtml+xml application/x-font-ttf application/x-font-opentype application/vnd.ms-fontobject image/svg+xml image/x-icon application/rss+xml application/atom_xml; Next.js设置 // next.config.js …

10 node.js  reactjs  nginx  gzip  next.js 

我正在做一个自定义的钩子，当状态发生变化时，它会带有一个togleg。 您应该能够传递数组中的任何状态。 import { useState, useEffect } from 'react' const useFlatListUpdate = (dependencies = []) => { const [toggle, setToggle] = useState(false) useEffect(() => { setToggle(t => !t) }, [...dependencies]) return toggle } export default useFlatListUpdate 它应该用作 const toggleFlatList = useFlatListUpdate([search, selectedField /*, anything */]) 但这给了我以下警告 React Hook useEffect在其依赖项数组中具有一个split元素。这意味着我们不能静态地验证您是否已经传递了正确的依赖项。eslint（react-hooks / …

10 reactjs  react-native  eslint  react-hooks 

在开发环境中时，我的应用程序可以正常工作。在生产环境中时，它崩溃并显示以下错误： Uncaught TypeError: (0 , _react.useEffect) is not a function 这发生在我导入React和useEffect的文件中，如下所示： import React, { useEffect } from 'react' const X = () => { useEffect(() => { ... }) ... } 在此行下添加console.log确认在生产中useEffect确实是未定义的，在dev中则是预期的功能。 我检查了package.json，yarn.lock和node_modules中是否存在引入了useEffect的16.8.0以下的任何react或react-dom版本。但是所有内容都是16.13.1，它们是主要依赖项，我确实尝试清理了纱线缓存，删除了node_modules＆yarn.lock，然后重新安装。 我尝试将其添加和删除peerDependencies失败。 我检查一下以确保没有运行两个独立版本的React，但要保存window.React1 = React在库和window.React2 = React我的应用程序中并检查 window.React1 === window.React2 是真的，所以也不是。 最后，我还尝试将React别名为node_modules中的特定别名，但是没有任何运气。 我发现可行的唯一解决方案是按如下方式导入它： import React from 'react'; const …

9 javascript  reactjs  react-hooks  parceljs 

我正在尝试配置新的react-redux应用程序以使用React-Redux的新功能。在官方文件说： React Redux现在提供了一组钩子API，以替代现有的connect（）高阶组件。 我一直在尝试找到一些与Hooks API相关的帮助文章，并提供一些实际示例，但是所有react-redux Apps都在使用connect函数。官方文档还显示了非常基本的示例。 我想使用useSelector（由Hooks API提供）更改应用程序中的连接功能。 这是我的应用程序中的示例代码片段。 //MessagesListContainer export default connect( // mapStateToProps (state:State) => ({ activeUser: getActiveUser(state), messages: getMessagesList(state), }) )(MessagesList) //Selectors export const getActiveUser = (state: State) => state.activeUser; export const getMessagesList = (state : State) => ( Object.keys(state.messages).map((key : any)=> state.messages[key]) ) export interface IMessagesListProps …

9 reactjs  typescript  redux  react-redux 

我有一个React组件，其中包括Internet连接的可用性标志。UI元素必须根据状态实时动态更改。同样，功能随着标志的改变而有所不同。 我当前的实现使用间隔每秒钟使用Axios轮询一次远程API，并相应地更新状态。我正在寻找一种更精细，更有效的方法来执行此任务，以最小的计算成本消除状态的1秒错误。仅当设备具有外部Internet连接时才视为在线 当前实施： class Container extends Component { constructor(props) { super(props) this.state = { isOnline: false }; this.webAPI = new WebAPI(); //Axios wrapper } componentDidMount() { setInterval(() => { this.webAPI.poll(success => this.setState({ isOnline: success }); }, 1000); } render() { return <ChildComponent isOnline={this.state.isOnline} />; } } 编辑： 寻找一种能够检测外部Internet连接的解决方案。设备可以连接到没有外部连接的局域网。因此，它被认为是脱机的。仅当设备可以访问外部Internet资源时，才考虑联机。

9 javascript  reactjs  axios 

我有一个包含其他元素的容器元素，但是根据屏幕尺寸的不同，它们的各个部分会被莫名其妙地切除。当调整HTML页面的宽度（通过单击并拖动它）时，您可以在我的代码沙箱链接中观察到这种行为。如何确保仅渲染主容器边框，并且子元素没有任何影响？ https://codesandbox.io/s/focused-tree-ms4f2 import React from "react"; import styled from "styled-components"; const StyledTextBox = styled.div` height: 15vh; width: 30vw; display: flex; flex-direction: column; margin: 0 auto; border: 1px solid black; background-color: #fff; > * { box-sizing: border-box; } `; const InputBox = styled.span` height: 35%; width: 100%; display: flex; border: none; …

9 javascript  css  reactjs 

今天突然之间，我开始在使用Typescript构建的项目中遇到构建错误。在一个文件（或它引用的任何文件）在几周内都没有更改的文件中，我开始得到： ./path/to/my/file.ts Line 0: Parsing error: Cannot read property 'name' of undefined 此错误首先出现在我们的CI上，可以通过在服务器上手动构建进行复制，并且最终我可以在更新所有软件包之后在自己的计算机上（运行良好）进行复制。现在，即使我取消了项目的旧（构建）提交，也无法构建它。我有yarn.lock致力于为我的回购，但即使与旧的package.json和yarn.lock（我删除node_modules，做yarn），我不能建立。 这个错误实际上从今天开始就出乎意料了。 可能是什么原因？ 我的（可能相关的）版本： yarn 1.22.4, node v13.11.0, typescript 3.7.5 react 16.12 react-scripts 3.4.0 macOS 10.15 Catalina

9 reactjs  typescript  create-react-app  react-scripts  react-typescript 

我已经实现了，react-pivottable只是想知道有没有一种方法可以在jQuery数据表视图中显示整个数据集 即，我有几列希望以表格形式显示所有这些内容，以用于以下数据 [ 'SRN', 'MainSystemType', 'MagnetType', 'MagnetCoverType', 'MagnetRMMUType', 'MagnetHighOrderShimPowerSupply', 'GradientAmplifierType', 'GradientInterfaceType', 'GradientSwitchType', 'RFSystemB1FieldSystem', 'RFSystemFrontendInterface', 'CabinetsDasCabinet', 'ReconstructorAvailableMemory', 'ReconstructorNumberOfProcessors', 'AcquisitionSystemBulkBoardType', 'CabinetsCoolersCabinet', 'AcquisitionSystemType', 'PatientSupportPatientSupportType', 'PatientInterfaceMiscellaneousBoxType', 'PatientInterfacePPUType', 'PatientInterfaceType', 'PatientInterfaceAudioModule', 'PatientInterfaceAudioSwitchType', 'PatientSupportPowerSupplyUnit', 'RFAmpType', 'IOP_Firmware', 'RFP_Firmware' ], [ 108, 'WA15', 'WA_15T', 'Wide Aperture', 'MEU', 'NONE', '781', 'IGCIDNA', 'NONE', 'HIGH', 'TFINT', 'DACC', 65536, 1, 'NONE', 'LCC2B', 'DDAS', …

9 jquery  reactjs  database  datatable  pivot-table 

我有一个api服务，在这里我有不同的方法来调用API。我已经成功测试了所有GET请求，但是在测试POST请求时遇到了麻烦。 这是方法： export default class ApiService { static makeApiCall = <T>( url: string, oneCb: <T>(d: Data) => T, secondCb: (d: T) => void, errorCb?: (a: ErrorModel) => void, method = 'get', data = {}, ): Promise<void> => { const config: AxiosRequestConfig = {}; if (method === 'post') { config.headers = …

9 javascript  reactjs  testing  ecmascript-6  jestjs 

我正在尝试一些单元测试，我用一个伪造的示例https://codesandbox.io/s/wizardly-hooks-32w6l创建了一个沙箱（实际上我有一个表单） class App extends React.Component { constructor(props) { super(props); this.state = { number: 0 }; } handleSubmit = (number1, number2) => { this.setState({ number: this.handleMultiply(number1, number2) }) } handleMultiply = (number1, number2) => { return number1 * number2 } render() { const { number } = this.state; return ( <div …

9 javascript  reactjs  jestjs 

我尝试打开一个包，但是当android运行时，它会显示下一条消息 2020-01-05 23：15：45.366 26210-26210 / com.note.principal W / .note.principa：访问隐藏字段Landroid / view / View;-> mAccessibilityDelegate：Landroid / view / View $ AccessibilityDelegate; （浅灰色列表，反射）2020-01-05 23：15：45.470 26210-26242 / com.note.principal E / ReactNativeJS：始终违规：requireNativeComponent：在UIManager中找不到“ RNCSafeAreaView”。 This error is located at: in RNCSafeAreaView in Unknown in Unknown in n in Unknown in Unknown in C in P …

9 javascript  android  reactjs  react-native  gradle 

因此，我在寻找这个问题的答案时发现，在导入时，{React'不需要在{}中，因为它是默认导出而不是命名导出，是的，但是我也看到了在导入默认导出时，我们可以在导入时使用任何名称。但是在这种情况下，我们只能使用以下导入， import React from 'react'; 并不是 import Somename from 'react';

9 javascript  reactjs 

我有一个使用Material UI及其主题提供程序（使用JSS）的应用程序。 我现在合并了fullcalendar-react，它实际上不是一个完整的React库-只是原始的fullcalendar代码的一个薄的React组件包装。 也就是说，我无法访问诸如渲染道具之类的东西来控制其元素样式。 但是，它确实允许您通过渲染元素时调用的回调直接访问DOM元素（例如eventRender方法）。 这是一个基本的演示沙箱。 现在，我要做的是使完整日历组件（例如，按钮）具有与我的应用程序其余部分相同的外观。 一种方法是，通过查看正在使用的类名称并相应地实现样式，我可以手动覆盖所有样式。 或者- 我可以实现Bootstrap主题-如其文档中所建议。 但是这些解决方案中的任何一个的问题在于： 会很多工作 如果我对MUI主题进行了更改，却忘记了更新日历主题，则它们将出现不同的同步问题。 我想做的是： 神奇地将MUI主题转换为Bootstrap主题。 或在MUI类名称和日历类名称之间创建映射，如下所示： .fc-button = .MuiButtonBase-root.MuiButton-root.MuiButton-contained .fc-button-primary= .MuiButton-containedPrimary 我不介意按摩选择器等使其工作（例如，MUI按钮有两个内部范围，而完整日历只有一个）。这主要是关于更改主题的时间-不想在两个地方都进行更改。 @extend我想到的是使用像Sass这样的语法。我可以很容易地用Sass创建全日历CSS-但是Sass如何访问MuiTheme？ 也许我可以采取相反的方法-告诉MUI'嘿，这些类名的样式应类似于这些MUI类'。 关于如何解决此问题的任何具体建议？

9 css  reactjs  fullcalendar  jss