Question

我正在尝试使用route中的render方法将对象props传递到Payments组件。

我已经尝试过将props传递给功能组件，但还是没有运气。

App.js

class App extends Component {
  state = {
    user: {},
  };
  componentDidMount() {
    const url = "/api/current-user";
    fetch(url, {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      credentials: "same-origin",
      method: "GET",
    })
      .then((response) => {
        if (!response.ok) {
          return response.json().then((err) => {
            throw err;
          });
        }
        return response.json();
      })
      .then((results) => {
        const user = results.user;
        this.setState({
          user,
        });
      })
      .catch((error) => {
        console.log("Error", error);
      });
  }

  render() {
    console.log(this.state.user);
    
    return (
      <div className="container">
        <h1 className="is-size-3">Test</h1>
        {this.state.user && (
          <Route
            exact
            path="/payments"
            render={(props) => <Payments {...props} user={this.state.user} /> }
          />
        )}
      </div>
    );
  }
}

Payments.js

function Payments() {
  return (
    <>
      <CheckoutForm user={this.props.user} />
      <CurrentSubscription subscription={subscription} />
    </>
  );
}

我尝试了几种方法，但是仍然得到不确定的“道具”。

预先感谢

Answer 1

这应该有效

function Payments(props) {
  return (
    <>
      <CheckoutForm user={props.user} />
      <CurrentSubscription subscription={subscription} />
    </>
  );
}

Answer 2

始终将道具放在您拥有道具的函数或类组件中，如下所示：

forb = (',', '.', '?', '!', ' ', ':', ';') # list of symbols that's gonna be excluded from text

def is_palindrome(text): # checking if palindrome
    s = len(text) // 2
    for a in range(s):
        return text[a] != text[-1-a]


smth = input('Enter a text: ')
smth = smth.lower()

for a in smth: # excluding all punctuation marks and spaces
    b = smth.index(a)
    if a in l:
        smth = smth[0:b] + smth[b+1:len(smth)]

if (is_palindrome(smth)):
    print("No, it isn't palindrome")
else:
    print("Yes, it is palindrome")

或

function Payments({user}) {
  return (
    <>
      <CheckoutForm user={user} />
      <CurrentSubscription subscription={subscription} />
    </>
  );
}

在功能组件中，没有function Payments(props) { return ( <> <CheckoutForm user={props.user} /> <CurrentSubscription subscription={subscription} /> </> ); }。

在React-Router Route中将对象作为道具传递

2 个答案: