javascript - encodeURIComponent in React - Stack Overflow

admin管理员组

文章数量:1352974

I have a react function returning a promise from axios, and I need to encode an equation type string is being passed to it.

const { equation } = this.state;
axios.post(`${this.state.rootUrl}/integrate`, { equation }).then(some other code)

I want to encode the string equation before passing it to the API for a query.

I have tried the following but it didn't work.

axios.post(`${this.state.rootUrl}/integrate`, { encodeURIComponent(equation) })

I also tried this:

const { equation } = this.state;
const { test } = encodeURIComponent(equation);
axios.post(`${this.state.rootUrl}/integrate`, { test }).then(some other code)

This also didn't work.

Here's the full code of the function where I'm trying use this:

handleSubmit = (e) => {
    e.preventDefault();
    const { equation } = this.state;
    // const { test } = encodeURIComponent(equation);
    axios.post(`${this.state.rootUrl}/integrate`, { equation })
      .then((response) => {
        const data = response.data;
        this.setState({ data: data });
        console.log(equation);
        if (data != null) {
          this.setState({input: data.response[0]});
        }
    }
  }

I have a react function returning a promise from axios, and I need to encode an equation type string is being passed to it.

const { equation } = this.state;
axios.post(`${this.state.rootUrl}/integrate`, { equation }).then(some other code)

I want to encode the string equation before passing it to the API for a query.

I have tried the following but it didn't work.

axios.post(`${this.state.rootUrl}/integrate`, { encodeURIComponent(equation) })

I also tried this:

const { equation } = this.state;
const { test } = encodeURIComponent(equation);
axios.post(`${this.state.rootUrl}/integrate`, { test }).then(some other code)

This also didn't work.

Here's the full code of the function where I'm trying use this:

handleSubmit = (e) => {
    e.preventDefault();
    const { equation } = this.state;
    // const { test } = encodeURIComponent(equation);
    axios.post(`${this.state.rootUrl}/integrate`, { equation })
      .then((response) => {
        const data = response.data;
        this.setState({ data: data });
        console.log(equation);
        if (data != null) {
          this.setState({input: data.response[0]});
        }
    }
  }

• javascript
• reactjs

Share Improve this question Follow asked Jan 31, 2018 at 14:58 mayorsanmayormayorsanmayor 2,98844 gold badges2626 silver badges4747 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

In your original example, you're using the shorthand syntax for setting object properties - the following two lines of code are equivalent:

{ equation }
{ equation: equation }

Your second two examples don't do the same thing! In example two, you're trying to use the shorthand with a method call, which won't work. In example three, you're trying to destructure the return value of encodeURIComponent(equation), which also won't work (it returns a string).

Fawaz's first example almost works, but there's a subtle difference in behavior - because they've named the variable test, the key of the object being passed to Axios will also be test. Remember, these are equivalent:

{ test }
{ test: test }

Presumably, your API is expecting something called equation, not test, so this won't work.

To get the right behavior, you should make sure the object you're passing has the right key:

const test = encodeURIComponent(equation);
axios.post(`${this.state.rootUrl}/integrate`, { equation: test })

// or

axios.post(`${this.state.rootUrl}/integrate`, { equation: encodeURIComponent(equation) })

There seems an issue in using the shorthand. Try like this :

const test = encodeURIComponent(equation); // no braces here
axios.post(`${this.state.rootUrl}/integrate`, { test }).then(some other code)

or

axios.post(`${this.state.rootUrl}/integrate`, { test: encodeURIComponent(equation) })

本文标签： javascriptencodeURIComponent in ReactStack Overflow