Question

您好，我无法在url参数中设置状态变量。我尝试了一些在互联网上找到的示例，但没有人为我工作。

我尝试过：

  constructor(props) {
    super(props);
    this.state = {
      channelId: []
    };
  }
     componentDidMount() {
          this.setState({ channelId: '1ae2275e-2ca2-42cb-be13-e97b59fbae13' });
        }
    componentWillMount() {
        fetch(
          `http://localhost:8080/api/channel/${this.state.channelId}`)
    .then...

这：

  constructor(props) {
    super(props);
    this.state = {
      channelId: []
    };
 componentDidMount() {
      this.setState({ channelId: '1ae2275e-2ca2-42cb-be13-e97b59fbae13' });
    }
componentWillMount() {
    fetch(
      `http://localhost:8080/api/channel/'+this.state.channelId)
.then...

它们都不是在url中设置值。也许有人可以告诉我我在做什么错？

Answer 1

componentWillMount在componentDidMount之前调用 ->因此在componentWillMount中，this.state.channelId = []

我认为，您应该在ComponentWillMount中设置channelId的状态，并在componentDidMount中调用api

constructor(props) {
    super(props);
    this.state = {
      channelId: ''
    };
 componentWillMount() {
      this.setState({ channelId: '1ae2275e-2ca2-42cb-be13-e97b59fbae13' });
    }
componentDidMount() {
    fetch(
      `http://localhost:8080/api/channel/'+this.state.channelId)
.then...

在React 16中，react不建议在新代码中使用componentWillMount（详细信息：https://reactjs.org/docs/react-component.html#unsafe_componentwillmount）

Answer 2

所以第一件事是将channelId设置为字符串而不是数组。

constructor(props) {
    super(props);
    this.state = {
      channelId: ''
     }

让我问您为什么要使用componentWillMount ...根据我的经验，有时它会添加不一定有用的生命周期。您是否尝试过

constructor(props) {
    super(props);
    this.state = {
      channelId: ''
    };
    
    componentDidMount() {
       this.getChannelId()
    }
    
    getChannelId() {
         this.setState({
            channelId: '1ae2275e-2ca2-42cb-be13-e97b59fbae13'
        });
        return fetch( `http://localhost:8080/api/channel/${this.state.channelId}`)
            .then(res => {
             // your code
             })
    }

？

我为我的应用程序使用了“类似”方法：

import React, { Component } from 'react';
import { connect} from 'react-redux';
import { API_BASE_URL } from '../config';
import { Weekday, Weekendday } from './Day';
import './Availability.css';

const currentUserId = localStorage.getItem("id");

export class Availability extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            availability: {},
            loading: false,
            error: null
        };
    }

    componentDidMount() {
        this.loadAvailability()
    }


    loadAvailability() {
        this.setState({
            loading: true
        });
        return fetch(`${API_BASE_URL}/employee/${currentUserId}/availability`)
            .then(res => {
                if (!res.ok) {
                    return Promise.reject(res.statusText);
                }
                return res.json();
            })
            .then(availability => {
                console.log(availability)
                this.setState({
                    availability,
                    loading: false
                })
            })
            .catch(err => {
                this.setState({
                    error: 'Could not load availability list',
                    load: false
                })
                console.log(this.state.error, err)
            })
        }
        
        ...

您还介意为该组件共享其余代码，以便我们看到何时需要其他状态更改吗？谢谢！

如何正确使用状态参数获取网址？

2 个答案: