小编Ron*_*ith的帖子

用React过滤列表

嗯,我看不到我的遗漏,但出现空白页面,并显示控制台错误,内容为:

Users.js:9 Uncaught TypeError: Cannot read property 'filter' of undefined
    at Users.render (Users.js:9)
Run Code Online (Sandbox Code Playgroud)

显然我使用了不正确的'filter()'。我环顾四周,但没有发现与“反应”相关的任何内容。有人可以帮忙吗?这些是文件:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Users from './Users';

ReactDOM.render(
  <Users list={[
    { name: 'Tyler', friend: true },
    { name: 'Ryan', friend: true },
    { name: 'Michael', friend: false },
    { name: 'Mikenzie', friend: false },
    { name: 'Jessica', friend: true },
    { name: 'Dan', friend: false …
Run Code Online (Sandbox Code Playgroud)

javascript arrays filtering reactjs

7
推荐指数
1
解决办法
5万
查看次数

在ES6上使用onChange

我只是在学习。将代码从ES5转换为ES6时,下拉菜单的'onChange'事件不起作用,我看不出问题出在哪里。我已经浏览过“可能有答案的问题”,但那里什么也没有。我的应用程序已编译,但控制台出现错误。我怀疑是Child.js的“选择”标记中的“ onChange”属性。我将不胜感激。这是我的代码:


index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Parent from './Parent';

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);
Run Code Online (Sandbox Code Playgroud)

Parent.js

import React from 'react';
import Child from './Child';
import Sibling from './Sibling';

class Parent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: 'Frarthur'};
    this.changeName = this.changeName.bind(this);
  }

  changeName(newName) {
    this.setState({name: newName});
  }

  render() {
    return (
      <div>
        <Child onChange={this.changeName} />
        <Sibling name={this.state.name} …
Run Code Online (Sandbox Code Playgroud)

javascript onchange reactjs

2
推荐指数
1
解决办法
4424
查看次数

为什么使用扩展语法的map()无法正常工作?

我真的不知道这出了什么问题。我从Banks&Porcello的O'Reilly的Learning React中看到了这个特定示例的帖子。但是,这些帖子似乎工作正常,但我的示例不起作用。如果我有错字,我看不到。我的缺点在哪里?我不知道为什么我会得到一个空字符串值而不是“ HB Woodlawn”

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>

  <script type="text/babel">

    // Editing one object in an array of objects

    let schools = [
      {name: 'Yorktown'},
      {name: 'Stratford'},
      {name: 'Washington & Lee'},
      {name: 'Wakefield'}
    ];

    const editName = (oldName, newName, arr) =>
      arr.map(item => {
        if (item.name === oldName) {
          return {
            ...item,
            name
          }
        }
        else {
          return item
        }
      });

    let …
Run Code Online (Sandbox Code Playgroud)

javascript dictionary spread-syntax

1
推荐指数
1
解决办法
4842
查看次数