无法在UI Reactj中呈现此.props.location.State的对象

Question

我非常陌生，可以在Visual Studio 2017中使用React进行反应和开发应用程序，其中用户在文本框中输入一些名称，在其下方，列表出现了建议。当用户单击任何项目时，他将重定向到另一页，其中显示了建议的项目的更多属性。到目前为止，我已经使用链接将一个组件的状态传递给另一个组件，但无法在另一个组件中显示该状态的属性。以下是我的组件的打字条代码。

search.tsx：

class Users {
profileId: string;
firstName: string;
middleName: string;
lastName: string;
dateOfBirth: string;
}
class Data {
users: Users[];
}
class QueryDetails {
search: string;
returncount: number;
skip: number;
top: number;
}
class SearchResult {
queryDetails: QueryDetails;
data: Data;
}  
class SearhProps {
searchResult: SearchResult;
searchText: string;
}

export class Search extends React.Component<any, SearhProps> {
constructor() {
    super();
    this.state = { searchText: '', searchResult: new SearchResult };
    this.handleSearchTextChange = this.handleSearchTextChange.bind(this);
}
public render() {
    return <div>
        <div>
            <input value={this.state.searchText} onChange={this.handleSearchTextChange} type="text" />
        </div>
        <div>
            <ul>
                {this.state.searchResult.data ? this.state.searchResult.data.users.map((user, index) =>
                    <li key={index}>
                        <Link to={{ pathname: '/s', search: '?name=' + this.state.searchText, state: this.state.searchResult.data }} key={index}>
                            <span>{user.firstName + ' ' + user.lastName}</span>
                        </Link>
                    </li>
                ) : null}
            </ul>
        </div>
    </div>;
}

在handlesearchTextChange方法上，我点击了API端点，并获取在文本框中输入的用户的所有信息，并仅显示所需字段，即建议列表中的名字和姓氏。

现在，由于所有信息都在this.state.searchresult.data中，我想将其传递给具有路由'/s'的另一个组件。此组件如下： -

searchlanding.tsx：

class Users {
profileId: string;
firstName: string;
middleName: string;
lastName: string;
dateOfBirth: string;
}
class UsersList {
users: Users[]
}
export class SearchLanding extends React.Component<RouteComponentProps<{}>, {}>  {
constructor() {
    super();
}
public render() {
return <div>
const userList = this.props.location.state as UsersList; //<= Logging userList or this.props.location.state gives me {users: Array(3)} and i get all the info if i expand this array
//This div will contain blocks of div which will show all the information of the user. But for now i am trying to display only the first name of the user
{userList ? userList.users.map(e => {
                <h2>{e.firstName}</h2>
            }) : null} //<= This is where it is not working
<div>

有人可以告诉我我要在哪里出错吗？我在this.props.location.state中获得了必要的对象，但似乎无法显示它。任何帮助将不胜感激

Answer 1

这很可能是由map回调中<h2>{e.firstName}</h2>周围的支架引起的。删除它们，或者使用{return <h2>{e.firstName}</h2>}作为map的结果是undefined s的数组。render中还有一些语法问题，但我认为这些问题来自部分复制/粘贴代码。