Question

我正在使用react-palette提取鲜艳的色彩。我在render方法中有这个：

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

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

已超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。 React限制了嵌套更新的数量，以防止无限循环。

我知道为什么会出现此错误，并且在render方法中设置状态是一种不好的做法，但是我不知道如何使用该库并为其设置状态。

Answer 1

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

I。因此，解决此问题的一种方法是将<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>

II。现在，另一种方法是，如果您真的必须将调色板存储在状态或某物中（也许是您的原因），则是要查看react-palette的编码方式并使用基础神奇的召唤使我们有了调色板：

看看Palette.js，我们看到了一个内部{@ {1}}实用工具的使用情况
接下来，查看getImagePalette，我们发现它实际上只是npm软件包node-vibrant的包装
从节点振动的documentation中，我们可以使用以下内容（而不是react-palette）

getImagePalette

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

使用React Palette并设置状态

1 个答案: