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

【问题标题】：Conditional Rendering in React won't work, state not working properly?React 中的条件渲染不起作用，状态不能正常工作？
【发布时间】：2020-09-06 18:41:18
【问题描述】：

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

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

更新

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

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

21 |产品列表？：产品[] | ^ 22 | } 23 | 24 |常量输出：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 | }

【问题讨论】：

我认为如果您发布了 minimal reproducible example 来表示您的尝试，您会得到更多回复。现在代码太多，无法查看并提供任何帮助。
试图减少它，感谢您的建议！
语法<Output data = {searched,productList}/> 与Output({ searched, productList }) 的类型签名不匹配。看起来您想传递两个道具，可以通过以下两种方式之一完成：<Output {{ searched, productList }} /> 或 <Output searched={searched} productList={productList} /> 应该编译
@MichaelHolborn，您能否 fork 这个codesandbox.io/s/nextjs-typescript-template-3re10 next js typescript codesandbox 并输入您的代码，这样可以更好地理解您的问题..

标签： javascript reactjs typescript next.js

【解决方案1】：

分解你的代码：

function Output(searched,productList) {
  if (!searched && !productList) {
    return null;
  }

  return (
    <div>
    <div>
            <p></p>

            {/* <Chart data={productList} /> */}
          </div>
          <table className="table-auto">
            <thead>
              <tr>
                <th className="px-4 py-2">Name</th>
                <th className="px-4 py-2">Price</th>
                <th className="px-4 py-2">Brand</th>
              </tr>
            </thead>
            <tbody>
              {productList.map((e, index) => (
                <tr key={index}>
                  <td className="border px-4 py-2">{e.Product}</td>
                  <td className="border px-4 py-2">{e.Price}</td>
                  <td className="border px-4 py-2">{e.Brand}</td>
                </tr>
              ))}
            </tbody>
          </table>
          </div>
  );
}

            <Output data = {etc}/>

但是，这是无效的。当你通过 JSX（即<Output/>）调用组件时，React 会期望 Output 是用单个 props 参数调用的，而不是多个参数。（此外，您的etc 在这里未定义）

所以你可能打算这样做：

// place your parameters inside an object, commonly referred to as "props"
function Output({ searched, productList }) {

而且，由于您使用的是 Typescript，因此您可以利用类型系统为您工作：

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

const Output: React.FC<OutputProps> = ({ searched, productList }) => {
  // Typescript infers searched and productList typing here
  if(!searched && !productList) {
    return null;
  }
  ...
}

在我们处理此问题时，请格式化您的代码。查看Prettier 以确保您的代码保持一致且易于阅读。

【讨论】：

刚才出错了，打字稿让我有点困惑，知道我做错了什么吗？
假设与 Type 有关系！
您传递的数据不正确。这甚至不是打字稿的问题，我建议你多研究一下 JavaScript 对象以及它们是如何传递给反应组件的
没问题。我曾尝试以 stackoverflow.com/questions/49081549/… 为例，但遇到了同样的错误。

【解决方案2】：

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

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

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

...


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

【讨论】：

使用这个仍然有同样的问题。我更新的代码包括这个，但仍然中断。
您是否更改了界面，因为这可能是您看到此错误的原因
还是不行吗？你确定你已经正确定义了接口而不是函数