Question

我很擅长在视觉工作室2017中使用react做出反应和开发应用程序，用户在文本框中输入一些名称，在其下方会出现一个列表，给出建议。当用户点击任何项目时，他将被重定向到另一个页面，其中显示了建议项目的更多属性。到目前为止，我已使用Link将一个组件的状态传递给另一个组件，但无法在另一个组件中显示该状态的属性。下面是我的组件的打字稿代码。

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中，我想把它传递给另一个有路由＆＃39; / s＆＃39;的组件。该组件如下： -

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

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

无法在UI reactjs中呈现this.props.location.state的对象

1 个答案: