小编iRo*_*tia的帖子

获取数据时，我得到：无法对未安装的组件执行 React 状态更新。该应用程序仍然有效，但反应表明我可能导致内存泄漏。

这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 清理函数中的所有订阅和异步任务。”

为什么我不断收到此警告？

我尝试研究这些解决方案：

https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal

https://developer.mozilla.org/en-US/docs/Web/API/AbortController

但这仍然给了我警告。

const  ArtistProfile = props => {
  const [artistData, setArtistData] = useState(null)
  const token = props.spotifyAPI.user_token

  const fetchData = () => {
    const id = window.location.pathname.split("/").pop()
    console.log(id)
    props.spotifyAPI.getArtistProfile(id, ["album"], "US", 10)
    .then(data => {setArtistData(data)})
  }
  useEffect(() => {
    fetchData()
    return () => { props.spotifyAPI.cancelRequest() }
  }, [])
  
  return (
    <ArtistProfileContainer>
      <AlbumContainer>
        {artistData ? artistData.artistAlbums.items.map(album => {
          return (
            <AlbumTag
              image={album.images[0].url}
              name={album.name}
              artists={album.artists}
              key={album.id}
            />
          )
        })
        : null}
      </AlbumContainer>
    </ArtistProfileContainer> …

我是编程的新手,如果我阅读官方文档,我会很难理解.

我从这里读到了React Router 4

在这篇文章中,作者正在谈论<HashRouter>和<BrowserRouter>

这就是他提到的

HashRouter基本上它使用URL中的哈希来呈现组件.由于我正在构建一个静态的单页网站,我需要使用它.

BrowserRouter,它使用HTML5历史API来渲染组件.可以通过pushState和replaceState修改历史记录.更多信息可以在这里找到

现在,我没有得到两者的重要性和用例.就像他说可以通过pushState和replaceState修改历史记录时的意思一样,它使用URL中的哈希来呈现组件

虽然BrowserRouter的第一个解释对我来说完全模糊,但关于HashRouter的第二个解释也没有意义,比如为什么有人会在url中使用Hash(#)来渲染组件？

重新加载后，我的应用程序停止加载。

我已经尝试过模拟器和 2 个真正的设备，android 和 ios。

错误是：

错误：无法./debugger-ui/debuggerWorker.d9da4ed7从``解析模块：

有时我会收到错误消息，“无法找到实例”。

我尝试了以下方法：

1. 清除守望者手表：watchman watch-del-all.
2. 删除node_modules文件夹：rm -rf node_modules && npm install。
3. 重置 Metro Bundler 缓存：rm -rf /tmp/metro-bundler-cache-*或npm start -- --reset-cache。
4. 删除加速缓存：rm -rf /tmp/haste-map-react-native-packager-*。

5. 重新启动计算机。

     Expo CLI 3.11.3 environment info:
       System:
         OS: macOS 10.15.2
         Shell: 5.7.1 - /bin/zsh
       Binaries:
         Node: 12.8.0 - ~/.nvm/versions/node/v12.8.0/bin/node
         Yarn: 1.19.1 - /usr/local/bin/yarn
         npm: 6.13.4 - ~/.nvm/versions/node/v12.8.0/bin/npm
         Watchman: 4.9.0 - /usr/local/bin/watchman
       IDEs:
         Android Studio: 3.5 AI-191.8026.42.35.5791312 …

   Run Code Online (Sandbox Code Playgroud)

我已经阅读了几篇关于何时使用和何时不使用的文章，useCallback但useMemo我大多看到的是非常contrived代码。我在查看我公司的代码时发现有人这样做了：

const takePhoto = useCallback(() => {
    launchCamera({ mediaType: "photo", cameraType: "front" }, onPickImage);
  }, []);

  const pickPhotoFromLibrary = async () => {
    launchImageLibrary({ mediaType: "photo" }, onPickImage);
  }

  const onUploadPress = useCallback(() => {
    Alert.alert(
      "Upload Photo",
      "From where would you like to take your photo?",
      [
        { text: "Camera", onPress: () => takePhoto() },
        { text: "Library", onPress: () => pickPhotoFromLibrary() },
      ]
    );
  }, [pickPhotoFromLibrary, takePhoto]);

这是 onUploadPress 的调用方式：

<TouchableOpacity
   style={styles.retakeButton} …

tyescript中的rootDir和baseUrl有什么区别？

根据 ts 文档

基本网址

Base directory to resolve non-relative module names. See Module Resolution documentation for more details.

和根目录

Specifies the root directory of input files. Only use to control the output directory structure with --outDir.

在我的 tsconfig 中，我添加了 "baseUrl": "app/javascript/src",

并且没有添加任何内容

rootDir

那是对的吗？（这有效，但我不确定这是否正确）

更新： rootDir 给我错误，因为我使用的是绝对路径

这是我的 tsconfig。（baseUrl 没有）

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es6",
      "dom"
    ],
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "jsx": "react",
    "target": "es5",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "app/javascript/src",
    "forceConsistentCasingInFileNames": …

例:

function Foo() {
    this.bla = 1;
    var blabla = 10;
    blablabla = 100;
    this.getBlabla = function () { 
        return blabla; // exposes blabla outside
    }
}

foo = new Foo();

原始问题:

我知道bla将分配给Foo的每个实例.会发生什么blabla？

新问题:

我现在明白了:

this.bla = 1;     // will become an attribute of every instance of FOO.
var blabla = 10;  // will become a local variable of Foo(**not** an attribute of every    instance of FOO), which could be accessed by any instance of FOO …

我试图了解以下方法中扩展语法与切片方法之间的区别.

假设我想制作一个数组的实际副本,我可以使用扩展语法轻松地做到这一点

var fruits = ["Banana", "Chips" , "Orange", "Lemon", "Apple", "Mango"]
var newCitrus = [...fruits]

如果我console.log这个

["Banana", "Chips", "Orange", "Lemon", "Apple", "Mango"] 

但我也可以使用切片方法创建一个数组的副本.考虑到上面的相同数组,如果我做这样的事情......

var citrus = fruits.slice(0);

然后控制台记录它,它将给我完全相同的数组,我将通过传播语法

["Banana", "Chips", "Orange", "Lemon", "Apple", "Mango"] 

由于它们都需要大约相同的时间来编码/写入,这有什么区别？我通常应该选择哪种方法？

我正在使用congap api来首先获取大约1500+加密货币的数据,然后使用Web-socket来更新加密货币的更新值.

我在这里使用redux来管理我的状态

在我的内部componentDidMount(),我正在调用一个可以获取硬币价值的redux动作 fetchCoin

componentDidMount() {
    this.props.fetchCoin()
  }

然后在return我做这样的事情

 <FlatList
           data={this.state.searchCoin ? displaySearchCrypto : this.props.cryptoLoaded}
           renderItem={({ item }) => (
           <CoinCard
              key={item["short"]}
              coinShortName = {item["short"]}
              coinName = {item["long"]}
              coinPrice = {item["price"].toFixed(2)}
              percentChange = {item["perc"].toFixed(2)}
              />

然后我有一个web-socket来更新加密货币的价值

 componentDidUpdate() {
    if (this.state.updateCoinData || this.updateCoinData.length < 1 ) {
      this.updateCoinData = [...this.props.cryptoLoaded];
     this.setState({updateCoinData: true})
    }
      this.socket.on('trades', (tradeMsg) => {
      for (let i=0; i< this.updateCoinData.length; i++) {

        if (this.updateCoinData[i]["short"] == tradeMsg.coin ) {

        //Search for changed Crypto Value …

我试图使用promise.all进行多个api调用，但由于某种原因，它引发了以下错误

TypeError：＃不可迭代

我的Promise很简单（这可能是我第二次使用Promise.all）

componentWillMount() {
    const id = this.props.location.pathname
    let axiosHome = axios.get('/home')
    let axiosUserData = axios.get("/profile/" + id)
    Promise.all(axiosHome,  axiosUserData).then(response => {
        console.log(response)
    }).catch(error => {
        console.log(error)
    })
  }

问题：知道为什么我会出现此错误吗？另外，有人还能解释我们什么时候使用带有promise的resolve关键字吗？

考虑这个例子

interface additonalProperties {
  backgroundColor: string,
  color: string,
  [key: string]: string
}

class StyleObjectMaker implements StyleObjectMaker {
  constructor(className: string, additonalProperties: additonalProperties = {}) {
    this.key = `button`
    this.className = `button${className ? '-' + className : ''}`
    this.property = {
      backgroundColor: colors[className] || colors.default,
      color: colors.default,
      ...additonalProperties
    }
  }
}

上面的 ts 正在抱怨

'backgroundColor' is specified more than once, so this usage will be overwritten

和同样的

  color

知道我该如何修复它吗？即我怎样才能允许覆盖

这就是我的 tsconfig 的样子

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": …