-1

我是新来的反应，在初学者学习课程后反应。我决定进行一个创建每月订阅应用程序的个人项目，该应用程序将帮助我跟踪我的所有订阅。但是，我被困在一个点，我需要将一个组件的状态传递给另一个组件，但另一个组件可以通过路由访问，顺便说一句，我正在使用到达路由器。有没有可能的方法。下面是我的代码。所以我基本上想要做的是，当我点击我列表中的订阅时，（比如：Netflix）它基本上应该带我另一个页面，并向我展示有关该订阅的所有必要细节。在这里，我希望通过状态（mylist）。

应用程序.js

const App = () => {
  return (
    <div className="container">
      <Router>
        <List path="/" />
        <Details path="/details/:sub" />
      </Router>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

List.js

const List = () => {
  const [mylist, setList] = React.useState([]);
  const [value, setValue] = React.useState({
    subscription: "",
    startDate: "",
    paymentTime: 0,
  });

  const handleSubmit = (e) => {
    mylist.push(value);
    setList(mylist);
    setValue({ subscription: "", startDate: "", paymentTime: 0 });
    e.preventDefault();
  };
  const handleOnChange = (event) => {
    setValue({ ...value, [event.target.name]: event.target.value });
  };
  return (
    <div>
      <div className="for_list">
        <ul className="list">
          {mylist.map((obj) => (
            // <Link to={`/details/${obj.subscription}`} key={obj.subscription}>
            <li key={obj.subscription}>{obj.subscription}</li>
            /* </Link> */
          ))}
        </ul>
      </div>
      <div className="for_form">
        <form>
          <input
            type="text"
            name="subscription"
            onChange={handleOnChange}
            value={value.subscription}
          />
          <input
            type="date"
            name="startDate"
            onChange={handleOnChange}
            value={value.startDate}
          />
          <input
            type="number"
            name="paymentTime"
            onChange={handleOnChange}
            value={value.paymentTime}
          />
        </form>
      </div>
      <button onClick={handleSubmit}>Add Item</button>
    </div>
  );
};

export default List;

详细信息.js

const Details = (props) => {
  return (
    <div>
       Dunno what to do ;(
    </div>
  );
};
export default Details;
4

1 回答 1

1

React Router 使用location对象。location对象的属性之一是state。您可以将一些数据字段传递给状态，然后在您的Details页面中，您将使用这些数据字段来获取每个相应订阅的数据。

在你的List.js：

...
const handleSubmit = (e) => {
  e.preventDefault();
  mylist.push(value);
  setList(mylist);
  setValue({ subscription: "", startDate: "", paymentTime: 0 });
  props.histoty.push({
    pathname: '/details/netflix',
    state: {
      id: 'netflix-id',
    }
  })
};
...

export default withRouter(List);

然后在你的Details.js：

import React, { useEffect, useState } from 'react'
import { withRouter } from 'react-router-dom'

const Details = (props) => {
  const [subInfo, setSubInfo] = useState({})
  useEffect(() => {
    fetch(`your-server-api/${props.state.id}`).then(res => res.json()).then(data => setSubInfo(data))
  }, [])
  return (
    <div>
       ...
    </div>
  );
};
export default withRouter(Details);

要记住的一件事是，如果用户直接导航到页面，则不会有任何状态，因此您仍然需要一些机制来在数据不存在时加载数据。

于 2020-07-06T01:14:29.737 回答