javascript - 不从数组返回 <li>

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 spread语法而不是推送和改变数组):

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

运行示例:

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"));

<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>

编辑
作为您评论的跟进，
setState 的功能版本不是这里的问题，但它更好用，因为 setState 批量更新，你可能没有你期望的当前更新状态。
使用功能性 setState 版本，您保证获得状态的当前“版本”。
您可以在 DOCS 中阅读更多相关信息.

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

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