javascript - 在显示之前显示映射数据而不被单击

Question

我的数据有点困难。我目前能够获取所有映射的数据，但没有我点击类别，数据将不会显示。

这是一个例子：

const categoriesData = [
  { 
        name: 'All', 
        label: 'All',
        total: '18', 
        className: 'activeCategory' 
    },

    { 
        name: 'Business Services',
        label: 'Business_Services',
        total: '18' 
    },

    { 
        name: 'Design Services',
        label: 'Design_Services',
        total: '18' 
    },

    {
        name: 'Education Services',
        label: 'Education_Services',
        total: '18'
    },

    {
        name: 'Finance Services',
        label: 'Finance_Services',
        total: '18'
    },

    {
        name: 'IT Services',
        label: 'IT_Services',
        total: '18'
    },

    {
        name: 'Legal Services',
        label: 'Legal_Services',
        total: '18'
    },

    {
        name: 'Manufacturing',
        label: 'Manufacturing',
        total: '18'
    },

    {
        name: 'Marketing',
        label: 'Marketing',
        total: '18'
    }
];

const postsData = {
  All: [
        { id: 1, name: 'Post 3' },
        { id: 2, name: 'Post 2' }
    ],
    Business_Services: [
        { id: 1, name: 'Post 3' },
        { id: 2, name: 'Post 2' }
    ],
    Design_Services: [
        { id: 1, name: 'Post 5' },
        { id: 2, name: 'Post 2' }
    ],
    Education_Services: [
        { id: 1, name: 'Post 1' },
        { id: 2, name: 'Post 2' }
    ],
    Finance_Services: [
        { id: 1, name: 'Post 1' },
        { id: 2, name: 'Post 2' }
    ],
    IT_Services: [
        { id: 1, name: 'Post 1' },
        { id: 2, name: 'Post 2' }
    ],
    Legal_Services: [
        { id: 1, name: 'Post 1' },
        { id: 2, name: 'Post 2' }
    ],
    Manufacturing: [
        
    ],
    Marketing: [
        { id: 1, name: 'Post 1' },
        { id: 2, name: 'Post 27675' }
    ]
};

function fakePostsApi(catName) {
  return new Promise((resolve) =>
    setTimeout(() => {
      resolve(postsData[catName]);
    }, 1000)
  );
}

function Main() {
  const [categories, setCategories] = React.useState(categoriesData);
  const [catName, setCatName] = React.useState();
  const [posts, setPosts] = React.useState([]);

  React.useEffect(() => {
    if (catName) {
      fakePostsApi(catName)
        .then(setPosts);
    }
  }, [catName]);

  return (
    <div>
      {categories.length > 0 ? (
        categories.map((category, i) => {
          return (
            <button key={i} onClick={() => setCatName(category.label)}>
              {category.name}
            </button>
          );
        })
      ) : (
        <p>Loading...</p>
      )}
      <div>
        {posts.length === 0 ? (
          <p>No posts...</p>
        ) : (
          posts.map((post) => <div key={post.id}>{post.name}</div>)
        )}
      </div>
    </div>
  );
}

ReactDOM.render(
    <Main />,
    root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

我的主要问题是：我希望在页面加载时首先显示 all 的值（就像活动状态一样），而无需单击All按钮。

标签： javascriptreactjsecmascript-6

Answer 1

设置默认值为catName类别第0项的标签：

const [catName, setCatName] = React.useState(categories[0] && categories[0].label);

或可选链 ( ?.)如果支持：

const [catName, setCatName] = React.useState(categories[0]?.label);

const categoriesData = [{"name":"All","label":"All","total":"18","className":"activeCategory"},{"name":"Business Services","label":"Business_Services","total":"18"},{"name":"Design Services","label":"Design_Services","total":"18"},{"name":"Education Services","label":"Education_Services","total":"18"},{"name":"Finance Services","label":"Finance_Services","total":"18"},{"name":"IT Services","label":"IT_Services","total":"18"},{"name":"Legal Services","label":"Legal_Services","total":"18"},{"name":"Manufacturing","label":"Manufacturing","total":"18"},{"name":"Marketing","label":"Marketing","total":"18"}];
const postsData = {"All":[{"id":1,"name":"Post 3"},{"id":2,"name":"Post 2"}],"Business_Services":[{"id":1,"name":"Post 3"},{"id":2,"name":"Post 2"}],"Design_Services":[{"id":1,"name":"Post 5"},{"id":2,"name":"Post 2"}],"Education_Services":[{"id":1,"name":"Post 1"},{"id":2,"name":"Post 2"}],"Finance_Services":[{"id":1,"name":"Post 1"},{"id":2,"name":"Post 2"}],"IT_Services":[{"id":1,"name":"Post 1"},{"id":2,"name":"Post 2"}],"Legal_Services":[{"id":1,"name":"Post 1"},{"id":2,"name":"Post 2"}],"Manufacturing":[],"Marketing":[{"id":1,"name":"Post 1"},{"id":2,"name":"Post 27675"}]};

function Main() {
  const [categories, setCategories] = React.useState(categoriesData);
  const [catName, setCatName] = React.useState(categories[0] && categories[0].label);
  const [posts, setPosts] = React.useState([]);

  React.useEffect(() => {
    if (catName) {
      fakePostsApi(catName)
        .then(setPosts);
    }
  }, [catName]);

  return (
    <div>
      {categories.length > 0 ? (
        categories.map((category, i) => {
          return (
            <button key={i} onClick={() => setCatName(category.label)}>
              {category.name}
            </button>
          );
        })
      ) : (
        <p>Loading...</p>
      )}
      <div>
        {posts.length === 0 ? (
          <p>No posts...</p>
        ) : (
          posts.map((post) => <div key={post.id}>{post.name}</div>)
        )}
      </div>
    </div>
  );
}

function fakePostsApi(catName) {
  return new Promise((resolve) =>
    setTimeout(() => {
      resolve(postsData[catName]);
    }, 1000)
  );
}

ReactDOM.render(
    <Main />,
    root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>