reactjs - 使用 React Palette 并设置状态

Question

我正在使用 react-palette 来提取鲜艳的颜色。我在渲染方法中有这个:

          <Palette image={this.state.img.src}>
                {palette => {
                    this.setState({vibrantColors:palette.vibrant});
                    console.log(palette);
                    return(
                    <div>
                        Text with the vibrant color
                    </div>
                )}}
            </Palette>

我想要的是使用这些颜色设置状态，但在上面的示例中，我收到此错误:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

我知道为什么会出现这个错误，并且在渲染方法内设置状态是不好的做法，但我不知道如何使用该库并用它设置状态。

Answer 1

您似乎正在从渲染内部执行 setState，这将触发渲染，该渲染将再次 setState 等...

我。所以解决这个问题的一种方法是移动 <Palette>标记更高。如果您想继续使用调色板来渲染某些内容，这通常很有用。

<Palette image={this.state.img.src}>
  {palette => {
    // no need to seState, we can just use it here or pass it to handlers
    // you know... the react way
    return <div>Text with the vibrant color</div>;
  }}
</Palette>

二.现在，如果您确实必须将调色板存储在状态或某物中(也许您有自己的理由)，则另一种方法是查看react-palette的编码方式并使用底层为我们提供调色板的神奇调用:

1. 正在查看Palette.js我们看到名为 getImagePalette 的内部 util 函数的使用
2. 接下来，查看getImagePalette我们看到它实际上只是 npm 包的包装 node-vibrant
3. 来自node-vibrant的documentation我们看到我们可以使用以下内容(而不是react-palette)

# install the version ^3.0.0
yarn add "node-vibrant@^3.0.0"
# or npm install --save "node-vibrant@^3.0.0"

import * as Vibrant from 'node-vibrant';
//...

doStuffWithPalette = (imgSrc) => {
  Vibrant.from(imgSrc).getPalette()
    .then(palette => {
      // do what ever you want with palette, even setState if you want to, just avoid calling it from a render/componentWillUpdate/componentDidUpdate to avoid having the same error you've got in the first place
    })
    .catch(error => {
      // handle errors
    });
}