地图未在 reactjs 中呈现 ui 元素

IT技术 reactjs
2021-04-08 10:20:38

render当该对象更新时，退出 todos 对象的最佳方法是什么？我试过通过它映射，但它没有返回任何错误。

代码：

import React from 'react';
const Todo = React.createClass({

    getInitialState() {
        return ({todos: []})
    },

    newTodo(e) {
        let today = new Date();
        if (e.key === 'Enter') {
          console.log(this.state.todos)
          this.setState({
              todos: this.state.todos.concat({title: e.target.value, date: today})
          })
        }
    },

    delTodo(e) {},

    render() {
        return (
            <div className="panel panel-default">
                <div className="panel-heading">Todo List Creator</div>
                <div className="panel-body">
                    <input type="text" placeholder="enter todo name" className="form-control" onKeyPress={this.newTodo}/>
                </div>
                <ul className="list-group">
                    {this.state.todos.map((td, index) => {
                        <li key={index} className="list-group-item">
                            <strong>{td.name}</strong><br/>
                            {td.date}
                        </li>
                    })}
                </ul>
            </div>
        );
    }
});

export default Todo
2个回答

您不会在mapbody内返回任何内容，map如果您不返回任何内容，它将undefined默认返回。

用这个：

<ul className="list-group"> 
    {this.state.todos.map((td, index) => { 
        return <li key={index} className="list-group-item"> 
                    <strong>{td.name}</strong>
                    <br/> 
                    {td.date.toDateString()} 
               </li> 
        }) 
    } 
</ul>

或者你也可以这样写而不使用{}：

<ul className="list-group"> 
    {this.state.todos.map((td, index) => (
           <li key={index} className="list-group-item"> 
                 <strong>{td.name}</strong>
                 <br/> 
                 {td.date.toDateString()}
           </li> 
       )) 
    } 
</ul>

笔记：

我们不能直接object/array在里面渲染任何东西jsx，因为日期是一个对象，所以你需要string通过 usingtoDateString()或任何其他date方法将它转换成。

检查工作待办事项示例：

const Todo = React.createClass({
    getInitialState() {
        return ({todos: []})
    },

    newTodo(e) {
        let today = new Date();
        if (e.key === 'Enter') {
          this.setState({
              todos: this.state.todos.concat({title: e.target.value, date: today})
          })
        }
    },

    delTodo(index) {
       let todos = this.state.todos.slice();
       todos.splice(index, 1);
       this.setState({todos})
    },

    render() {
        return (
            <div className="panel panel-default">
                <div className="panel-heading">Todo List Creator</div>
                <div className="panel-body">
                    <input type="text" placeholder="enter todo name" className="form-control" onKeyPress={this.newTodo}/>
                </div>
                <ul className="list-group"> 
                    {this.state.todos.map((td, index) => { 
                        return <li key={index} className="list-group-item"> 
                                  <strong>{td.title}</strong>  
                                  <button onClick={() => this.delTodo(index)}>delete</button>
                                  <br/> 
                                  {td.date.toDateString()} 
                               </li> 
                        }) 
                    } 
                </ul>
            </div>
        );
    }
});

ReactDOM.render(<Todo/>, document.getElementById('app'))
<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='app'/>

检查这个片段map：

let a = [1,2,3,4,5,6];

let b = a.map(el => {
   if(el % 2)
      return el;
});

console.log(b);

原因是，您直接在 jsx中渲染日期对象，我们不能直接渲染对象/数组，通过使用toDateString()或任何其他日期方法将其转换为字符串，使用：{td.date.toDateString()}
2021-06-04 10:20:38
那不是你的问题:)，使用工作待办事项应用程序检查更新的答案，包括删除功能，运行代码段:)
2021-06-05 10:20:38
当我使用 return 时，我在控制台中收到“对象作为 React 子对象无效”错误。
2021-06-07 10:20:38
我现在需要能够删除待办事项。
2021-06-16 10:20:38

如果您希望箭头函数返回一个值，请使用()而不是{}

{this.state.todos.map((td, index) => (
    <li key={index} className="list-group-item">
       <strong>{td.name}</strong><br/>
       {td.date}
    </li>
))
其它你可能感兴趣的问题
上一篇在 render() 之前使用什么组件生命周期来做某事？ 下一篇强制 React 容器刷新数据