为什么点击菜单项排序时无法重新渲染组件

Question

这是我的代码，我有一个列表联系人来呈现视图 ListContact，在该视图中，我的菜单排序有 2 项：“Tên(A-Z)”增加，“Tên(Z-A)”减少和 list.map。为什么单击菜单项排序时无法重新渲染该视图。我尝试使用 UseState 和 UseEffect 但它不起作用。我使用@headlessui/react 的菜单。

function ViewListFriend() {

    const [contacts, setContacts] = useState([....]);

    contacts.sort((a, b) => a.name.localeCompare(b.name));
    const [selectedOptionName, setSelectedOptionName] = useState('ins');

    useEffect(() => {
        // const sortedContacts = [...contacts].sort((a, b) => {
        //     if (selectedOptionName === 'ins') {
        //         return a.name.localeCompare(b.name);
        //     } else {
        //         return b.name.localeCompare(a.name);
        //     }
        // });
        // setContacts(sortedContacts);
    }, [selectedOptionName]);

    function ListContact({ list }) {
        return (

            <Menu as="div">
                <div>
                    <Menu.Button>
                        <p>{selectedOptionName === 'ins' ? 'Tên(A-Z)' : 'Tên (Z-A)'}</p>
                    </Menu.Button>
                </div>
                <Menu.Items>
                    <div>
                        <Menu.Item>
                            {({ active }) => (
                                <button
                                    onClick={() => {
                                        setSelectedOptionName('ins')
                                        const sortedContacts = [...contacts].sort((a, b) => a.name.localeCompare(b.name));
                                        setContacts(sortedContacts);
                                    }}>
                                    Tên (A-Z)
                                </button>
                            )}
                        </Menu.Item>
                        <Menu.Item>
                            {({ active }) => (
                                <button
                                    onClick={() => {
                                        setSelectedOptionName('des')
                                        const sortedContacts = [...contacts].sort((b, a) => a.name.localeCompare(b.name));
                                        setContacts(sortedContacts);
                                    }}>
                                    Tên (Z-A)
                                </button>
                            )}
                        </Menu.Item>
                    </div>
                </Menu.Items>
            </Menu>    

            {
            list.map(item => (
                ...render item
            ))
        }
        </div >
    )
    }

    return (
        <div className="flex flex-1 flex-col">
            <ListContact list={contacts} />
        </div>
    )
}
export default ViewListFriend;

单击菜单项时如何渲染视图。

Answer 1

尝试这个

import React, { useState } from 'react';


export function App(props) {
  const [contacts, setContacts] = useState([{ name: "b" }, { name: "a" }, { name: "c" }]);
  const [selectedOptionName, setSelectedOptionName] = useState('ins');

  function ListContact({ list }) {
    return (
      <div>
        <div>
          <div>
            <button>
              <p>{selectedOptionName === 'ins' ? 'Tên(A-Z)' : 'Tên (Z-A)'}</p>
            </button>
          </div>
          <div>
            <div>
              <div>
                <button
                  onClick={() => {
                    setSelectedOptionName('ins')
                    const sortedContacts = [...contacts].sort((a, b) => a.name.localeCompare(b.name));
                    setContacts(sortedContacts);
                  }}>
                  Tên (A-Z)
                </button>
              </div>
              <div>
                <button
                  onClick={() => {
                    setSelectedOptionName('des')
                    const sortedContacts = [...contacts].sort((b, a) => a.name.localeCompare(b.name));
                    setContacts(sortedContacts);
                  }}>
                  Tên (Z-A)
                </button>
              </div>
            </div>
          </div>
        </div>
        {list.map((item, index) => <p key={index} style={{ color: 'red' }}>{item.name}</p>)}
      </div>
    )
  }

  return (
    <div className="flex flex-1 flex-col">
      <ListContact list={contacts} />
    </div>
  );
}