小编ton*_*on1的帖子

当我看到 MUI 的 default 时AppBar，它的子项看起来非常不同，尤其是在宽屏幕尺寸下。徽标位于完全左侧，其他导航位于右侧。所以项目看起来彼此分开。

我想要做的是像 Bootstrap 的组件，我想应用如下图所示的最大宽度。如何在其中设置容器AppBar？

这是我尝试过的。

<AppBar>
    <ToolBar>
        <Grid
             container
             style = {{ maxWidth: 1170 }}
         >
         <Typography>Logo</Typography> 
         </Grid>
    </ToolBar>
</AppBar>

但它不起作用......

我想要的是将填充设置为嵌套<Text>在React Native中，它在基于Web的react-native中工作，但Android设备或模拟器无法正常工作。以下是我想要的。

但是，就像下面的截图一样，在 Android 设备或模拟器中，您可以看到info的填充不受影响。我该如何做到这一点？

https://snack.expo.io/HJBd!h2l8

代码很简单。

 <Text>
   <Text style={{ padding: 10, backgroundColor: "yellow"}}>Info</Text> What I want to is simple.
 </Text>

下面是我的数据结构。

{
    "_id" : "room1",
    "members" : [ 
        {
            "_id" : "member1",
            "name" : "Michael",
            "payments" : [
                {
                    "month": "2018/09"
                    "amount": "20"
                }
            ]
        }, 
    ]
}

我想将下面的对象推到迈克尔的payments

{ 
  "month": "2018/09", 
  "amount": "5000" 
}

在这种情况下，我想要的是覆盖对象，因为month: "2018/09"已经存在。像下面这样：

{
    "_id" : "room1",
    "members" : [ 
        {
            "_id" : "member1",
            "name" : "Michale",
            "payments" : [
                {
                    "month": "2018/09"
                    "amount": "5000"
                }
            ]
        }, 
    ]
}

而且，如果我想推送month付款中不存在的对象，我想将此对象添加到payments.

{ 
  "month": "2018/10", 
  "amount": "2000" 
}

所以预期的结果是

{ …

我有<MobileLayout />，<DesktopLayout />。我用于Next.js服务器端渲染。我注意到有许多著名的 ui 库都有移动检测组件，例如<Respnosive />Semantic-UI-React 中的组件。但所有这些都是客户端方法，无法正常工作SSR

我阅读了一些文档，结论是我应该检查user-agent服务器端req.headers。在 Next.js 中，检测设备并有条件渲染MobileLayout/之一的正确方法是什么DesktopLayout？

我尝试过的

在_app.js

import isMobile from 'ismobilejs'

...

function Homepage({ Component, pageProps, mobile }){
  return (
    mobile ? 
      <MobileLayout><Component {...pageProps} /></MobileLayout> : 
      <DesktopLayout><Component {...pageProps} /></DesktopLayout>
  )
}

HomePage.getInitialProps = async (appContext) => {
  const userAgent = appContext.ctx.req.headers['user-agent']
  const mobile = isMobile(userAgent).any
  const appProps = await App.getInitialProps(appContext)
  return { ...appProps, mobile }
}

但问题是 …

我正在尝试实现debouncemui 自动完成，但效果不佳。

我想在更改时向服务器发送去抖请求inputValue。

我错过了什么吗？

它看起来loadData会触发每次输入更改。仅第一次加载debounce有效。

https://codesandbox.io/s/debounce-not-working-j4ixgg?file=/src/App.js

这是沙箱中的代码：

import { useState, useCallback } from "react";
import { Autocomplete, TextField } from "@mui/material";
import { debounce } from "lodash";
import topFilms from "./topFilms";

export default function App() {
  const [value, setValue] = useState(null);
  const [inputValue, setInputValue] = useState("");
  const [options, setOptions] = useState([]);

  const loadData = () => {
    // sleep(1000)
    const filteredOptions = topFilms.filter((f) =>
      f.title.includes(inputValue)
    );
    // This log statement added by …

我想使用回调来处理函数执行顺序。其实我正在学习 Node.js。由于它的异步性，我很难处理流程。不管怎样，有3个函数有回调，

function first(callback){
    console.log("First");
    callback;
}

function second(callback){
    console.log("Second");
    callback;
}


function third(callback){
    console.log("Third");
}

// Let's run it!

first(second(third));

// result 

Second
First

我不明白为什么会出现这样的结果。我预计如下：

First
Second
Third

什么问题？我怎样才能正确地做到这一点？在 Node.js 中，人们通常使用回调来处理函数执行顺序吗？我认为这并不复杂。不是吗？

我使用 设置我的本地服务器express.js，它只是处理请求并返回简单的消息。

app.get('/hello', (req, res) => {
    res.send('Hello world !');
});

我执行了服务器并在网络浏览器上对其进行了测试，效果很好。

只是我想在我的 react-native应用程序。

这是我的action.js文件

import axios from 'axios';

exports.helloButtonPressAct = (email, password) => {
    return function (dispatch) {
        return axios.get('http://localhost:3000/hello')
            .then(function (response) {
                console.log(response);

                // and create action obj here
                // dispatch(someAction(...))
            })
            .catch(function (error) {
                throw error;
                console.log(error);
            });
    };
};

它只返回catch()结果。

可能未处理的承诺拒绝（id：0）：网络错误错误：createError时的网络错误......

也许出了什么问题，但我找不到它是什么。

我怎样才能解决这个问题？

有两个图像 uri，第一个位于firebase storage 中，第二个是react-native blog 中的示例图像。

而且我相信 recat-native 的Image组件是可缓存的。

<View>
   <Image 
       style={{ width: 100, height: 100 }}
       source={{ uri : 'https://firebasestorage.googleapis.com/v0/b/siren-5eee7.appspot.com/o/profile%2FmO2vxzWDbJRzM5ckzCBXtf0aPhV2?alt=media'}}
    />

    <Image 
       style={{ width: 100, height: 100 }}
       source={{ uri : 'https://facebook.github.io/react-native/img/react-native-congratulations.png'}}
    />
<View>

问题

我认为 firebase 存储的图像没有缓存。当我渲染屏幕时，它总是试图下载。所以第二个图像加载速度更快，一秒钟后，加载 firebase 图像。

如何使 Firebase 存储图像可缓存？

你可以测试上面的代码！

我觉得标题不太好理解，我的意思是当我们使用UI库，比如Bootstrap，Material UI等等...当我们点击按钮显示模态时，除了模态之外的背景不透明度都变成了黑暗。

https://material-ui.com/components/modal/#modal

当您单击按钮显示模态时，您可以在上面的网址中看到。背景像模糊效果一样变化。

我不使用上面的库，我只想自己制作。下面是我的代码，你能给我一些提示吗？我想我可能会应用风格document，有什么好主意吗？

https://codesandbox.io/s/frosty-newton-icl0e

我还没有完全理解 React 的Server Side Rendering. 两个例子之间发生了什么不同的行为？

第一的

function Test() {
  const context = useContext(AuthContext)
  const { user } = context

  return (
    user ? <h1>User</h1> : <h1>No User</h1>
  )
}

export default withApollo({ ssr: true })(Test)

===> 发生错误文本内容不匹配。服务器：“无用户”客户端：“用户”

第二

function Test() {
  const context = useContext(AuthContext)
  const [ user, setUser ] = useState(null)

  useEffect(() => {
     setUser(context.user)
  }, [])

  return (
    user ? <h1>User</h1> : <h1>No User</h1>
  )
}

export default withApollo({ ssr: true })(Test)

===> 没有错误。 …