javascript - 如何在 React 中获取从状态生成的查询参数

Question

我看过几篇与此相关的帖子，但它们似乎都从固定的参数中获取参数。示例:

<Link to=`/lista/:idList`}> <button>Go To List</button> </Link>

然后你可以让他们这样做:

componentDidMount() {
    console.log(this.props.match.params);
 }

但是如果在我的应用程序中我有这样的东西怎么办:

 <Link to={`/lista/${this.state.url_lista}`}> <button>Go To List</button> </Link>

参数取决于父组件 (CreateList.js) 的状态，当我单击转到列表时，应用程序将转到子组件 ( TheList.js)。如果我想获取参数(基本上是 this.state.url_lista)，那么我不能执行上述操作，可以吗？

我也无法将状态从父级传递给子级，对吗？

这是两个组件的代码:

export default class CreateList extends Component {
  state = {
    listaIsCreated: false,
    lista: "",
    url_lista: ""
  }

  createList = (event) => {
    event.preventDefault()

    this.setState({
      listaIsCreated: true,
      lista: event.target.elements.titulolista.value
    })

    const tituloLista = event.target.elements.titulolista.value;
    axios.post('http://localhost:4000/api/list', {
      title: tituloLista
    })
      .then(res => {
        console.log(res)

        let id_newList = res.data._id;

        this.setState({
          url_lista: id_newList
        })
      })
      .catch(error => {
        console.error(error)
      })
  }

  render() {
          </div>
              <Link to={`/lista/${this.state.url_lista}`}> <button>Go To List</button> </Link>
            </div>

      )
    }
  }
}

export default class TheList extends React.Component {

    state = {
        titulo_lista: ""
    }
    componentDidMount() {
        console.log(this.props.match.params);
         // Do get request using the url params
     }
    
        render(){
            return (
               
            )
        }
    }

Answer 1

如果，正如您所描述的，TheList是CreateList的 child ，那么你可以将 prop 从父级传递给子级。但在您的代码示例中，两个代码文件似乎无关，没有 <TheList>里面<CreateList>渲染函数。

我怀疑两者之间的实际联系可能隐藏在 React Router 内，因为您的代码似乎得到 props.match从某个地方。如果您的解决方案不起作用，您是否尝试过？如果React Router处理 URL，如果 /lista/:idList被定义为一条路线，其中 :idList作为一个参数，它应该可以通过 props.match.params.idList 之类的方式访问。 。请参阅How to get params in component in react router dom v4 .

现在推荐的另一种在组件之间共享信息的方法，即使它们没有作为父子耦合，也是 context API .