ReactJS TypeError：从URL读取参数时无法读取未定义的属性'props'

问题描述

我有两页，一页用于搜索，一页用于结果。在搜索页面中，提交包含搜索项的表单，然后将其传递到URL中。在结果页中，我尝试读取该参数并将其作为变量传递给我在那里的函数，但是我不断收到以下错误：

class Search extends Component { constructor(props){ super(props) this.state = { search: '' } } handleSubmit = (event) => { event.preventDefault() const data = this.state this.props.history.push('/search/' + data.search); } handleInputChange = (event) => { event.preventDefault() this.setState({ [event.target.name]: event.target.value }) } render(){ const {search} = this.state return ( <div> <p>What are you searching for?</p> <form onSubmit={this.handleSubmit}> <p><input type="text" placeholder="Search" name="search" onChange={this.handleInputChange}></input></p> <p><button>Search!</button></p> </form> </div> ) } }

这是我的搜索页面：

function Result() {


  const ListLoading = withListLoading(List);
  const [appState,setAppState] = useState({
    loading: false,products: null,});

  useEffect(() => {
    setAppState({ loading: true });
    const baseUrl = "http://localhost:8080/"
    const searchItem = this.props.params.search
    let urls = [];
    const allUrls = shops.map((shop) => {
      let url = baseUrl + searchItem;
      urls.push(url)
    });

    function fetchData() {
      const allRequests = urls.map(url =>
        fetch(url).then(response => response.json())
      );
      return Promise.all(allRequests);
    };

    fetchData().then(arrayOfResponses => 
      setAppState({loading: false,products: arrayOfResponses}),);
  },[setAppState]);
  return (
    <div className='App'>
      <div className='container'>
        <h1>Products</h1>
      </div>
      <div className='repo-container'>
        <ListLoading isLoading={appState.loading} products={appState.products} />
      </div>
      <footer>
      </footer>
    </div>
  );
}
export default Result;

然后在结果页面中，我有以下代码：

const searchItem = this.props.params.search

该函数将调用我在本地主机上运行的另一个应用程序。我设置了变量display: grid;，但这似乎不起作用。

我还能如何从URL中读取参数并将其设置为变量？

解决方法

道具作为参数传递给功能组件。您无法通过“ this”访问它们：

function Result (props) {
  // do stuff with props,not this.props
}

可能是一个问题的另一个观察结果：

将onSubmit={this.handleSubmit}更改为onSubmit={e => this.handleSubmit(e)}

问题是，当您在对象上调用方法时，作用域（在函数内部时“ this”表示的范围）设置为在其上调用方法的对象。因此，当您这样做时：

this.handleSubmit()

…在handleSubmit函数“这个”内部（仍然）是您的组件。

但是，如果您将其分离并作为常规函数自行调用：

const fn = this.handleSubmit;
fn() // “this” isn’t set; it’s undefined inside the function

范围丢失。因此，当您尝试执行this.props时，它会爆炸，因为“ this”是未定义的。

javascript reactjs reactjs