Question

如果我违反任何规则，我很抱歉。我在论坛上看起来非常彻底，并且找不到我的问题的答案。

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

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

我已将数据记录到控制台，我知道我正在获取正确的Json数据。但是，当我尝试显示它时（正如你在跨度中看到的那样），我得到：

＆＃34;未捕获（承诺）TypeError：无法读取属性＆＃39; fullname＆＃39;未定义＆＃34;

我到处都看到它表明问题源于初始状态未定义，但我认为我已经用＆＃34; getInitialState＆＃34;正确的吗？

此外，如果我不尝试使用任何属性，它会在列表中生成正确的长度，只是行是空的。 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

这是一个更新的例子。这应该让你去。我需要做一个调整，但它超过了我的睡觉时间。我早上会再次点击这个。现在你必须准确输入人名，无论姓名中有多少个字符匹配，我们都需要匹配。我不知道为什么要做到这一点真是太痛苦了。不过，这是一次很好的学习经历！

＆＃13;

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

＆＃13;

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

＆＃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;

React：无法在渲染功能中从rest API访问对象属性

1 个答案: