React 中的条件渲染不起作用,状态不能正常工作?
Posted
技术标签:
【中文标题】React 中的条件渲染不起作用,状态不能正常工作?【英文标题】:Conditional Rendering in React won't work, state not working properly? 【发布时间】: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 并输入您的代码,这样可以更好地理解您的问题..
【参考方案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 对象以及它们是如何传递给反应组件的 没问题。我曾尝试以 ***.com/questions/49081549/… 为例,但遇到了同样的错误。【参考方案2】:您希望输出组件具有 productList
和 searched
作为道具,但是您将 data
作为道具传递
其次你必须直接定义接口而不是函数
interface OutputProps
searched?: string
productList?: Product[]
...
<Output searched=searched productList=productList/>
【讨论】:
使用这个仍然有同样的问题。我更新的代码包括这个,但仍然中断。 您是否更改了界面,因为这可能是您看到此错误的原因 还是不行吗?你确定你已经正确定义了接口而不是函数以上是关于React 中的条件渲染不起作用,状态不能正常工作?的主要内容,如果未能解决你的问题,请参考以下文章