反应：无法从渲染函数中的其余API访问对象属性

Question

我在这里新来的很抱歉，如果我违反任何规则。 我通过论坛看起来很彻底，一直没能找到我的问题的答案。

我一直在使用反应前端在youtube上关注其余API教程。在我遇到这个问题后，我几乎完全相同地复制了代码，但是我的错误仍然存​​在。

我试图呈现所有在搜索中与名称匹配的员工列表。

我记录了数据到控制台，我知道我得到正确的Json数据。然而，当我尝试显示它（你可以在跨度看）我得到：

“未捕获（在承诺）类型错误：无法读取的未定义的属性‘全名’”

无论我已经看了它表明这个问题源于未定义的初始状态，但我想我已经用“getInitialState”覆盖了这个问题？另外，如果我不尝试使用任何属性，它会在列表中产生正确的长度，这只是行是空的。 I.E.如果我搜索3件事物，则列表是3行。 4件事，列表是4行。我似乎无法显示其属性。

我能想到的唯一的另一件事是我强迫我的mongodb在sudo中运行以避免更改所有权，但我怀疑这与它有什么关系？

这里是我想要取（员工JSON套阵列）的数据：

[ 
    { 
     "_id": "598e2c934bf28a7106043bd5", 
     "fullname": "Michael Trinco", 
     "__v": 0, 
     "action3": false, 
     "action2": false, 
     "action1": true 
    }, 
    { 
     "_id": "598e2c9b4bf28a7106043bd6", 
     "fullname": "Andrew Holdaway", 
     "__v": 0, 
     "action3": false, 
     "action2": false, 
     "action1": true 
    }, 
    { 
     "_id": "598e4d10a29532714f857f33", 
     "fullname": "David Holdaway", 
     "__v": 0, 
     "action3": false, 
     "action2": false, 
     "action1": true 
    } 
] 

代码：

<script type="text/babel"> 


var Employees = React.createClass({ 
    getInitialState: function(){ 
     return({ 
      employees: [] 
     }); 
    }, 
    render:function(){ 
     var employees = this.state.employees; 
     console.log(employees); 
     employees = employees.map(function(employee, index){ 
      return(
       <li key={index}> 
        <span>{employee.obj.fullname}</span> 
       </li> 
      ); 
     }); 
     return(
      <div id="employee-container"> 
       <form id="search" onSubmit={this.handleSubmit}> 
        <label>Search by fullname:</label> 
        <input type="text" ref="fullname" placeholder="Search by Name..." /> 
        <input type="submit" value="Find Employees" /> 
       </form> 
       <ul>{employees}</ul> 
      </div> 
     ); 
    }, 
    handleSubmit: function(e){ 
     e.preventDefault(); 
     var fullname = this.refs.fullname.value; 

     fetch('/api/employees?fullname='+fullname).then(function(data){ 
      return data.json(); 
     }).then(json => 
      {this.setState({employees: json}); 
     }).catch(function(error){ 
      console.log(error); 
     }); 
    } 
}); 

ReactDOM.render(<Employees />, document.getElementById('output')); 

</script> 

感谢所有帮助

Answer 1

这里有一个更新的例子。这应该让你去。我需要做一些调整，但它已经超过了我的睡前时间。我会在早上再次击中它。现在你必须准确输入人物名称，无论名称中有多少个字符匹配，我们都需要它匹配。我不知道为什么这是一个很难完成的事情。尽管这是一个很好的学习体验！

console.clear() 
 
const MOCK_DATA = [ 
 
    { 
 
     "_id": "598e2c934bf28a7106043bd5", 
 
     "fullname": "Michael Trinco", 
 
     "__v": 0, 
 
     "action3": false, 
 
     "action2": false, 
 
     "action1": true 
 
    }, 
 
    { 
 
     "_id": "598e2c9b4bf28a7106043bd6", 
 
     "fullname": "Andrew Holdaway", 
 
     "__v": 0, 
 
     "action3": false, 
 
     "action2": false, 
 
     "action1": true 
 
    }, 
 
    { 
 
     "_id": "598e4d10a29532714f857f33", 
 
     "fullname": "David Holdaway", 
 
     "__v": 0, 
 
     "action3": false, 
 
     "action2": false, 
 
     "action1": true 
 
    } 
 
] 
 
    
 

 
class Employees extends React.Component { 
 
    constructor() { 
 
    super() 
 
    this.state = { 
 
     filterText: '', 
 
     filteredNames: '' 
 
    } 
 
    this.filterUpdate = this.filterUpdate.bind(this) 
 
    this.search = this.search.bind(this) 
 
    } 
 
    filterUpdate(e) { 
 
    this.setState({filterText: e.target.value}) 
 
    } 
 
    search() { 
 
    console.log("search triggered: ", this.state.filterText) 
 
    const input = this.state.filterText.toLowerCase() 
 
    const names = MOCK_DATA.filter(person => { 
 
     return person.fullname.toLowerCase().indexOf(input) 
 
    }) 
 
    this.setState({filteredNames: names}) 
 
    } 
 
    render() { 
 
    return (
 
     <div className="employee-container"> 
 
      <label>Search by Fullname:</label> 
 
      <input 
 
      type="text" 
 
      value={this.state.filterText} 
 
      onChange={this.filterUpdate} 
 
      placeholder="Search by Name..." 
 
      /> 
 
      <button onClick={this.search}>Search</button> 
 
      <div> 
 
      <pre> 
 
      <code> 
 
      {JSON.stringify(this.state.filteredNames, null, 2)} 
 
      </code> 
 
      </pre> 
 
      </div> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<Employees />, document.getElementById("root"))

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #212121; 
 
    color: #dbdbdb; 
 
    font-family: sans-serif; 
 
} 
 

 
.employee-container { 
 
    margin: 2rem; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 

 
form { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
input, button { 
 
    margin: 1rem; 
 
}

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