账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    React state更新第三方库未重新渲染
    27
    0

    我需要将js定义的一些style传到一个第三方库里，但是貌似state更新后并没有重新渲染样式,我确定组件是更新了，但是这个第三方库传进去的样式未更新，有人帮忙解决下吗？

    代码如下

    class Console extends React.Component {

  getConsoleFeedStyle(theme) {
    const style = {};
    switch (theme) {
      case 'light':
        return Object.assign(style, a);
      case 'dark':
        return Object.assign(style, b);
      case 'contrast':
        return Object.assign(style, c);
      default:
        return '';
    }
  }


render() {
    return (
        <div>
          {this.props.consoleEvents.map((consoleEvent) => {
            const { theme } = this.props;
            return (
              <div key={consoleEvent.id}>
                <ConsoleFeed
                  styles={this.getConsoleFeedStyle(theme)}
                  logs={Array.of(consoleEvent)}
                />
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 卍魅惑 普通会员 1楼

      在React中，当你从useState或useEffect中更新状态时，React会自动重新渲染组件。然而，如果你更新的是一个第三方库（例如，一个库的API），并且第三方库未重新渲染，那么你可能需要手动重新渲染组件。

      以下是一些可能的解决方案：

      1. 使用第三方库的API。许多第三方库提供了useEffect和useState的功能，你可以直接使用它们。例如，如果你正在使用Redux，你可以这样更新状态：

      ```jsx import { useSelector, useDispatch } from 'react-redux'; import { updateTodo } from './actions';

      const todos = useSelector((state) => state.todos); const dispatch = useDispatch();

      const updateTodo = (id, text) => { dispatch(updateTodo(id, text)); };

      export default () => { const { id, text } = todos;

      return (

      updateTodo(e.target.value, text)} />
      ); }; ```

      1. 使用第三方库的API。许多第三方库提供了useMemo和useState的功能，你可以直接使用它们。例如，如果你正在使用MobX，你可以这样更新状态：

      ```jsx import { useMemo, useState } from 'react';

      const todos = useMemo(() => todos, [todos]);

      const updateTodo = (id, text) => { todos[id] = text; };

      export default () => { const { id, text } = todos;

      return (

      updateTodo(e.target.value, text)} />
      ); }; ```

      1. 使用第三方库的API。许多第三方库提供了useCallback和useMemo的功能，你可以直接使用它们。例如，如果你正在使用Enzyme，你可以这样更新状态：

      ```jsx import { useCallback, useMemo } from 'enzyme'; import { useState } from 'react';

      const todos = useMemo(() => todos, [todos]);

      const updateTodo = (id, text) => { todos[id] = text; };

      export default function Example() { const [todos, setTodos] = useState(todos); const [id, setId] = useState(id);

      const handleClick = () => { setTodos(todos.map((todo) => todo.id === id ? { ...todo, text: 'Updated' } : todo)); };

      return (

      updateTodo(e.target.value, 'Updated')} />
        {todos.map((todo, index) => (
      • {todo.text}
        • ))}
      ); }; ```

      请注意，如果第三方库未重新渲染，那么你可能需要在useMemo或useCallback中添加一个检查，以确保你的状态没有改变。例如，你可以在useMemo中添加一个检查：

      ```jsx const todos = useMemo(() => todos, [todos]);

      const updateTodo = (id, text) => { todos[id] = text; };

      export default function Example() { const [todos, setTodos] = useState(todos); const [id, setId] = useState(id);

      const handleClick = () => { setTodos(todos.map((todo) => todo.id === id ? { ...todo, text: 'Updated' } : todo)); };

      useEffect(() => { const unsubscribe = todos.subscribe((todos) => { if (todos.length !== id) { throw new Error('State has changed'); } });

      return () => unsubscribe();

      }, [todos, id]);

      return (

      updateTodo(e.target.value, 'Updated')} />
        {todos.map((todo, index) => (
      • {todo.text}
        • ))}
      ); }; ```

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部