Question

您好，谢谢您的时间。

我正在学习这门课程：https://app.pluralsight.com/library/courses/react-flux-building-applications/table-of-contents我发现React Router API已经发生变化。

在尝试传递表单数据以查看，通过Route和Link组件时，我遇到了困难。

我会写下重要的代码：

Main.js持有Route，重要的Route是/author/:id

的路径

const Main = () => (
    <Switch>
        <Route exact path="/Home" component={Home}/>
        <Route path="/authors" component={AuthorPage}/>
        <Route path="/about" component={About}/>
        <Route path="/author" component={ManageAuthorPage}/>

        <Route path="/author/:id" component={ManageAuthorPage}/>

        <Redirect from="*" to="/Home"/>
    </Switch>
);

我们把author.id放在authorList.js中，重要的部分是：<td><Link to="/author/"render={(props) => <ManageAuthorPage id={author.id}/>}>{author.id}</Link></td>

    const AuthorList = (props) => {

    const createAuthorRow = function (author) {
        return (
            <tr key={author.id}>

                <td><Link to="/author/"
                          render={(props) => <ManageAuthorPage id={author.id}/>}>{author.id}</Link>
                </td>

                <td>{author.firstName} {author.lastName}</td>
            </tr>
        )
            ;
    };


    return (
        <div>
            <table className="table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                </tr>
                </thead>
                <tbody>
                {props.authors.map(createAuthorRow, this)}
                </tbody>
            </table>
        </div>
    );
};

AuthorList.propTypes = {
    authors: PropTypes.array.isRequired
};

我们在manageAuthorPage.js上使用它，重要的代码在ComponentWillMount中：

class ManageAuthorPage extends React.Component {
    state = {
        author: {
            id: '',
            firstName: '',
            lastName: '',
        },
    };

    setAuthorState = (event) => {
        let field = event.target.name;
        let value = event.target.value;
        this.state.author[field] = value;
        return this.setState({author: this.state.author});
    };

    saveAuthor = (event) => {
        event.preventDefault();
        AuthorApi.saveAuthor(this.state.author);
        toastr.success('Author saved ;=)');
    };



    componentWillMount = () => {
        const authorId = this.props.id;
        console.log(authorId);

        if (authorId) {
            this.setState({author: AuthorApi.getAuthorById(authorId)});
        }
    };

    render() {
        return (
            <AuthorForm author={this.state.author}
                        onChange={this.setAuthorState}
                        onSave={this.saveAuthor}/>
        );
    };
}

控制台输出：

警告：标记上的道具render的值无效。从元素中删除它，或传递字符串或数字值以将其保留在DOM中。有关详情。

你能帮我吗？

我还读过：React Router Pass Param to Component https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

编辑：

我也试过@Ramana Venkata建议，使用：

        <Route path="/author?id={id}" component={ManageAuthorPage}/>

在manageAuthorPage中我做：

 componentDidMount = () => {
    const authorId = this.props.id;
    console.log(this.props);

    if (authorId) {
        this.setState({author: AuthorApi.getAuthorById(authorId)});
    }
};

我确实在url中看到了author.id，但是当我们编写时它不会产生：console.log(this.props);

所以我的意思是，如果网址是：

http://localhost:3001/author/cory-house

match.location.search的控制台输出是＆＃34;＆＃34;。 为什么？

感谢您的帮助。

EDIT2：我也尝试过更新课程的版本：

https://github.com/coryhouse/react-flux-building-applications/pull/1/files

使用：

相同的Main.js路线：

        <Route path="/author/:id" component={ManageAuthorPage}/>

将id作为字符串传递给链接：

                <td><Link to={"author/" + author.id}>{author.id}</Link></td>

另外在manageAuthorPage中我们现在有：

componentDidMount = () => {
    var authorId = this.props.match.params.id; //from the path '/author:id'
    console.log(this.props);
};

authorId未定义：

同样在控制台的输出中，我只看到：match.location.pathname中的author.id，用于URL：http://localhost:3001/author/cory-house we see:

"/author/cory-house"

你能帮我吗？

谢谢。

React：如何在页面之间传递数据？

0 个答案: