javascript - React 中的条件渲染不起作用，状态不能正常工作？

Question

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

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

更新

做出改变，
现在收到此错误。

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

21 | productList?: Product[] | ^ 22 | } 23 | 24 | const Output: 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作为 Prop 但是你通过它data作为 Prop

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

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

...


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