设置 useState 时不会重新呈现 className 语句

Question

当我单击“线程”/按钮时 handleClick 被调用并且 currentIndex 是 updated/set 触发按钮的 className 三元语句执行为 true。但是，由于有许多 <li> 元素，其他元素不会将 className 重新呈现给 false 语句。 currentIndex 对于这些元素不应该 == thread.id。

ThreadItem 组件

import { useState } from 'react'

const ThreadItem = ({ thread, changeThread }) => {

    const [currentIndex, setCurrentIndex] = useState('')

    // On thread click
    const handleClick = (threadId) => {
        setCurrentIndex(threadId)
    }

    return (
        <li className="chat-item">
            <form onSubmit={changeThread}>
                <button className={currentIndex == thread.id ? 'side-menu-links-focus threads' : 'side-menu-links threads'} onClick={() => handleClick(thread.id)}>{`#${thread.threadType}`}</button>
            </form>
        </li>
    )
}

export default ThreadItem

父级 ThreadList 组件

import ThreadItem from './ThreadItem'

const ThreadList = ({ threads, changeThread }) => {

    return (
        <ul className='chat-list'>
            {threads.map((thread) => (
                <ThreadItem
                    key={thread.id}
                    thread={thread}
                    changeThread={changeThread}
                />
            ))}
        </ul>
    )
}

export default ThreadList

Answer 1

如果我对你的问题理解正确，你想点击一个按钮，然后有一个 ThreadItem 来改变 className。

我看到的问题是，您已将 useState 添加到每个 ThreadItem。相反，您应该将上面的状态移动到 ThreadList 组件。

这样，整个项目列表只有一个状态实例。只需将 active 属性和 onClick 处理程序传递给每个 ThreadItem.

线程列表

import React, { useState } from 'react';
import ThreadItem from './ThreadItem';

const ThreadList = ({ threads, changeThread }) => {
  const [currentIndex, setCurrentIndex] = useState('');

  // On thread click
  const handleClick = (threadId) => {
    setCurrentIndex(threadId);
  };

  return (
    <ul className="chat-list">
      {threads.map((thread) => (
        <ThreadItem
          key={thread.id}
          thread={thread}
          changeThread={changeThread}
          isActive={currentIndex === thread.id}
          onClick={() => handleClick(thread.id)}
        />
      ))}
    </ul>
  );
};

export default ThreadList;

线程项

import React from 'react';

const ThreadItem = ({ thread, changeThread, isActive, onClick }) => {
  return (
    <li className="chat-item">
      <form onSubmit={changeThread}>
        <button
          className={isActive ? 'side-menu-links-focus threads' : 'side-menu-links threads'}
          onClick={onClick}
        >{`#${thread.threadType}`}</button>
      </form>
    </li>
  );
};

export default ThreadItem;

设置 useState 时不会重新呈现 className 语句

className statement not re-rending when useState is set

rxjs

reactjs

线程列表

线程项