Question

大家好，我正在尝试编写小应用程序代码。我是实习程序员。我需要帮助以了解如何在我的应用程序上使用道具。我目前正在使用CodePen中的一个组件，并且从jsonplaceholder中获取了数据。但是我不知道如何在该组件和App.js之间传递道具。使用简单的组件没有问题，但是这里有很多方法和事件。使用此标记的输入，我想添加或删除项目。

import React from "react";

import StateFullComponent from "./components/StateFullComponent";
import StatelessComponent from "./components/StatelessComponent";
import TagInput from "./components/TagInput";

function App() {
  return (
    <div>
      <StatelessComponent
        props1={"String"}
        props2={1}
        props3={true}
        props4={JSON.stringify({ value: "value", key: 1 })}
      />
      <StateFullComponent items={["apple", "orrange", "pear", "male"]} />
      <TagInput />
    </div>
  );
}

export default App;

import React, { Component } from "react";

export default class TagInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      focused: false,
      input: ""
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
    this.handleRemoveItem = this.handleRemoveItem.bind(this);
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => {
        return response.json();
      })
      .then(result => {
        this.setState({
          users: result
        });
      });
  }

  add() {
    let value = Math.floor(Math.random() * 10 + 1);
    let users = this.state.users;
    users.push(value);
    this.setState({ users: users });
  }

  handleInputChange(evt) {
    this.setState({ input: evt.target.value });
  }

  handleInputKeyDown(evt) {
    if (evt.keyCode === 13) {
      const { value } = evt.target;

      this.setState(state => ({
        users: [...state.users, value],
        input: ""
      }));
    }

    if (
      this.state.users.length &&
      evt.keyCode === 8 &&
      !this.state.input.length
    ) {
      this.setState(state => ({
        users: state.users.slice(0, state.users.length - 1)
      }));
    }
  }

  handleRemoveItem(index) {
    return () => {
      this.setState(state => ({
        users: state.users.filter((user, i) => i !== index)
      }));
    };
  }

  render() {
    console.log(this.props, ":::::::::::");

    const { users } = this.state;

    const userId = users.map((user, id) => <li key={id}>{user.name}</li>);
    const styles = {
      container: {
        border: "1px solid #ddd",
        padding: "5px",
        borderRadius: "5px"
      },

      items: {
        display: "inline-block",
        padding: "2px",
        border: "1px solid blue",
        fontFamily: "Helvetica, sans-serif",
        borderRadius: "5px",
        marginRight: "5px",
        cursor: "pointer"
      },

      input: {
        outline: "none",
        border: "none",
        fontSize: "14px",
        fontFamily: "Helvetica, sans-serif"
      }
    };

    return (
      /*  <div>
        <ul>{userId}</ul>
        <button onClick={this.handleRemoveItem().bind(this)}>add</button>
      </div> */

      <label>
        <ul style={styles.container}>
          {this.state.users.map((user, i) => (
            <li
              key={i}
              style={styles.users}
              onClick={this.handleRemoveItem(i).bind(this)}
            >
              {user}
              <span>(x)</span>
            </li>
          ))}
          <input
            style={styles.input}
            value={this.state.input}
            onChange={this.handleInputChange.bind(this)}
            onKeyDown={this.handleInputKeyDown.bind(this)}
          />
        </ul>
      </label>
    );
  }
}

Answer 1

在componentDidMount中，您正在获取数据，并获取对象数组，并将状态值users设置为对象数组。一切都很好，而这正是您应该做的。

当您遍历用户数组时，问题出在render方法中。请记住，数组中的每个user都是一个对象。查看li元素中的jsx。您正在渲染user对象，并且该对象是无效的react子代。相反，您需要呈现对象中的特定字段。

例如，如果对象包含一个name字段和一个email字段，则渲染{user.name}或{user.email}。这样，您可以呈现用户对象中数据的特定字段。

<li
  key={i}
  style={styles.users}
  onClick={this.handleRemoveItem(i).bind(this)}
>
    Name: {user.name}
    Email: {user.email}
    Id: {user.id}
    <span>(x)</span>
</li>

对于将道具传递到组件，您似乎仍有一些疑问。这仅解决您所看到的特定错误。如果您还有问题，请告诉我。

如何在组件之间发送道具和方法？

1 个答案: