Material UI SearchBar 值标签导致错误：“this”未定义答案

【问题标题】：Material UI SearchBar value tag causes error: "this" is undefinedMaterial UI SearchBar 值标签导致错误：“this”未定义
【发布时间】：2021-09-06 23:37:57
【问题描述】：

material-UI 的 <SearchBar /> 的示例用法对我不起作用。我试图运行的代码是。

import SearchBar from "material-ui-search-bar";
 
function App() {
  return (
    <SearchBar
      value={this.state.value}
      onChange={(newValue) => this.setState({ value: newValue })}
      onRequestSearch={() => doSomethingWith(this.state.value)}
    />
  );
}

我从https://www.npmjs.com/package/material-ui-search-bar得到的我得到了这个错误

TypeError: this is undefined
App
src/components/App.js:20

  17 | // );
  18 | return (
  19 |   <SearchBar
> 20 |     value={this.state.value}
     | ^  21 |     onChange={(newValue) => this.setState({ value: newValue })}
  22 |   />
  23 | );

renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js:14985
mountIndeterminateComponent
node_modules/react-dom/cjs/react-dom.development.js:17811
beginWork
node_modules/react-dom/cjs/react-dom.development.js:19049
callCallback
node_modules/react-dom/cjs/react-dom.development.js:3945
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:3994
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:4056
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js:23964
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:22776
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js:22707
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js:22670
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:22293
scheduleUpdateOnFiber
node_modules/react-dom/cjs/react-dom.development.js:21881
updateContainer
node_modules/react-dom/cjs/react-dom.development.js:25482
legacyRenderSubtreeIntoContainer/<
node_modules/react-dom/cjs/react-dom.development.js:26021
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js:22431
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:26020
render
node_modules/react-dom/cjs/react-dom.development.js:26103

当我删除“value={this.state.value}”部分后，错误就解决了，声明和使用“value”的正确方法是什么？

【问题讨论】：

你为什么在功能组件中使用this关键字
你使用的是功能组件，所以你应该使用hooks作为状态
@sairaj 很可能是因为我不知道自己在做什么。我只是按照示例代码进行操作，在这种情况下正确的做法是什么？
您应该使用useState 来获得所需的行为

标签： reactjs npm material-ui

【解决方案1】：

您的App 是一个功能组件，因此您需要以这种方式重写您的组件：

import React, { useState } from 'react';

function App() {
  const [value, setValue] = useState(""); 
  return (
    <SearchBar
      value={value}
      onChange={(newValue) => setValue(newValue)}
      onRequestSearch={() => doSomethingWith(value)}
    />
  );
}

【讨论】：