小编may*_*yor的帖子

当我尝试从渲染方法返回（更复杂的）值时，我不断地最终生成各种错误。其中大部分，我都能解决。但这一次，该组件根本没有渲染，但是......没有控制台错误。

当涉及到返回单个 <div/> 元素时，我理解标准 return(...) 语法，但在某些情况下，我不完全理解为什么它会破坏我的代码。

我正在尝试的代码示例：

class RenderMe1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = { list: ['A','B','C'] }
    }
    render() {
        return(
        <div>
            <div>
                /* === Works === */
                { this.state.list.map((object, index) => this.state.list[index] ) }
            </div>
        </div>);
    }
}

class RenderMe2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = { list: ['0','0','0'] }
    }
    render() {
        return(
        <div>
            <div>
                /* === Doesn't Work === */
                { this.state.list.map((object, index) => { this.state.list[index] } ) }
            </div>
        </div>); …

我有一个从 axios 返回承诺的 React 函数，我需要对传递给它的方程类型字符串进行编码。

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

我想在将字符串方程传递给 API 进行查询之前对其进行编码。

我尝试过以下方法，但没有成功。

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

我也尝试过这个：

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

这也行不通。

这是我尝试使用的函数的完整代码：

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 }); …