React 中的条件渲染不起作用，状态无法正常工作？

Question

我试图让一个组件只在我使用搜索按钮时呈现。

下面的代码是我当前的代码

更新

进行了更改，现在收到此错误。

错误] /home/holborn/Documents/Work/Portfolio/Data_Scraping/Eldritch/client/pages/index.tsx(21,19) 中的错误：21:19 找不到名称“产品”。19 | 接口 OutputProps { 20 | 搜索过？：字符串

21 | 产品列表？：产品[] | ^ 22 | 23 | 24 | const 输出：React.FC = ({ searched, productList }) => {

这是进行搜索时的产品列表数组

在遵循其他问题后，我收到此错误。

JSX element type 'void' is not a constructor function for JSX elements.
    262 | 
    263 |   return (
  > 264 |     <Output columns={columns} message={message} handleSearch={handleSearch} searchRef={searchRef} productList={productList}/>
        |     ^
    265 | 
    266 |   );
    267 | }

Answer 1

您希望输出组件具有productList和searched作为 props，但是您将其data作为 props传递

其次，您必须直接定义接口而不是函数

 interface OutputProps {
    searched?: string
    productList?: Product[]
}

...


<Output searched={searched} productList={productList}/>