Question

我只是想从数组中将li渲染为ul（有序列表），但出于某种原因它并不适合我。当我映射数组时，这会显示错误Map is not a function。非常感谢任何帮助

import React from 'react';
import './style.css';

class List extends React.Component {

  constructor() {
    super();
    this.state = {
      list: [<li>Default-li</li>]
    }
  }

  render() {

    return (
      <div className='global'>

        <button onClick={() => {
          this.setState({ list: this.state.list.push(<li>Added-li</li>) })
          console.log(this.state.list.length);
        }
        }>ADD</button>

        <ul>
          {
            this.state.list.map((li) => {
              return (li);
            })
          }
        </ul>

      </div>
    );
  }

}

export default List;

Answer 1

你得到它是因为在第一个render中list尚未填充尝试有条件地渲染它：

this.state.list && this.state.list.map((li) => {
              return (li);
            })

另一个问题是您的setState，它建议使用setState的功能版本并访问其参数中的list（我也使用ES6传播）语法而不是推送和改变数组）：

this.setState(prevState => ({ list: [...prevState.list, <li>Added-li</li>] }))

运行示例：

＆＃13;

class List extends React.Component {
  constructor() {
    super();
    this.state = {
      list: [<li>Default-li</li>]
    };
  }

  render() {
    return (
      <div className="global">
        <button
          onClick={() => {
            this.setState(prevState => ({ list: [...prevState.list, <li>Added-li</li>] }))
            console.log(this.state.list.length);
          }}
        >
          ADD
        </button>

        <ul>
          {this.state.list &&
            this.state.list.map(li => {
              return li;
            })}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<List />, document.getElementById("root"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

修改
作为评论的后续内容，
setState的功能版本不是问题，但最好使用，因为setState批量更新，您可能没有预期的当前更新状态。
使用功能setState版本，您可以保证获得当前的＃34;版本＆＃34;国家您可以在DOCS中详细了解相关信息。

这里真正的问题是你使用的Array#push没有返回数组而是new length of it（它会改变原来的数组，这也被认为是不好的做法）。

这就是我使用ES6 array spread syntax的原因，它允许我们为新数组创建浅拷贝并将其与新值组合。

Answer 2

阅读文档... JavaScript的Array.prototype.push（）不返回新数组但是新数组的长度......我建议你将函数改为

       <button onClick={() => {
          let list = this.state.list
          list.push(<li>Added-li</li>)
          this.setState({ list })
          console.log(this.state.list.length);
        }
        }>ADD</button>

Answer 3

import React from 'react'; 

class List extends React.Component {

constructor(){
    super();
    this.state = {
        list:["Default-li"]
    }
}

render() {

    return(
        <div className = 'global'>

            <button onClick = { () => {
            this.state.list = Object.assign([],this.state.list,this.state.list.push("a"))
                            {console.log(this.state.list)}
                            this.forceUpdate()
            }
            }>ADD</button>

            <ul>
                {
                    this.state.list.map((li) =>{
                                              return(<li>{li}</li>)
                    })
                }
            </ul>

        </div>
    );
}
}

export default List;

验证。你可以尝试一下因为this.state对象的类型总是对象所以我们只需要使它成为数组希望这个帮助它正在我的电脑上运行，希望它适合你。

不从数组返回<li>

3 个答案: