时间戳

首页 > 解决方案 > React - 运算符'<'不能应用于类型'void'和'number'

javascript - React - 运算符'<'不能应用于类型'void'和'number'

问题描述

我在 StackBlitz 上有一个演示。这是非常伪代码，我的实际代码要复杂得多。

我将三个组件加载到index.tsx. 每个组件都有一个检查上述布尔值的条件。我的实际代码检查来自 GraphQL 调用的数据。

如果显示组件，我想存储文本。我正在尝试使用useState. 因此，如果显示“关于”部分，请在nav状态中添加“关于”。

我收到错误：

Operator '<' cannot be applied to types 'void' and 'number'

谁能解释这个错误，是否可以这样做？

import React, { useState } from "react";
import { render } from "react-dom";
import About from "./About";
import Products from "./Products";
import Contact from "./Contact";
import "./style.css";

const App = () => {
  const [nav, setNav] = useState([])

  const about = true;
  const products = true;
  const contact = true;

  return (
    <div>
      {about && (
        setNav([...nav, 'About'])
        <About />
      )}
      {products && (
        setNav([...nav, 'Products'])
        <Products />
      )}
      {contact && (
        setNav([...nav, 'Contact'])
        <Contact />)}
    </div>
  );
};

render(<App />, document.getElementById("root"));

标签： javascriptreactjsreact-hooksuse-state

解决方案

我不确定我是否正确理解了您的问题。如果您的代码检查来自 GraphQL 调用的数据，您应该nav从那里更新状态（在收到响应后立即）并根据该状态显示组件，而不是相反。

您可以使用useEffect挂钩来获取响应并更新您的状态。我还将使用对象而不是数组来存储导航状态（更新其值更容易）。

function App() {
  const [nav, setNav] = React.useState({
    about: false,
    contact: false, 
    products: false,
  });

  React.useEffect(() => {
    // make the graphQL call here and based on the response update the state:
    
    const graphqlResponse = {
      about: true,
      contact: false,
      products: true,
      // ... others
    }
    
    setNav({
      about: graphqlResponse.about,
      contact: graphqlResponse.contact,
      products: graphqlResponse.products,
    });
  }, []);

  return (
    <div>
      {nav.about && <About />}
      {nav.products && <Products />}
      {nav.contact && <Contact />}
      <pre>{JSON.stringify({nav}, null, 2)}</pre>
    </div>
  );
};

function About() { return <h2>About</h2> }
function Contact() { return <h2>Contact</h2> }
function Products() { return <h2>Products</h2> }

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

推荐阅读