Question

我是新来的反应者，在初学者学习后会做出反应。我决定进行一个个人项目，以创建每月订阅的应用程序，这将帮助我跟踪所有订阅。但是，我陷入了需要将一个组件的状态传递到另一个组件的状态，而其他组件可以通过路由访问的问题，而我正在使用到达路由器。有没有可能的办法。下面是我的代码。因此，我基本上想要做的是，当我单击列表中的订阅（例如Netflix）时，它基本上应该带我另一页，并向我显示有关该订阅的所有必要详细信息。在这里，我想传递状态（我的清单）。

App.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;

Details.js

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

Answer 1

反应路由器使用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);

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

如何在不同文件或路由之间传递数据以作出反应？

1 个答案: