Question

尝试绕开道具，所以如果这是一个愚蠢的错误，请原谅我。我正在尝试将我的所有数据传递到一个变量中，然后传递到props中（使用{item.text}和{item.key}），但是，我的“ .map”没有拾取任何东西，并且有一堆错误，我的代码有什么问题？

问题具体在此代码段中

      createList(list) {
        return <li>{list.text}</li>
      }

      render() {

        var entries = this.state.list
        var finalEntries = entries.props.map(this.createList)

这是完整的代码

    import React from "react";
    import "./App.css";
    import { isTemplateElement } from "@babel/types";

    class TodoListt extends React.Component {
      state = {};

      constructor(props) {
        super(props);

        this.state = {
          userInput: "",
          list: [],
        };
      }

      changeUserInput(input) {
        this.setState({
          userInput: input
        })
      }


      addToList(input) {
        let listArray = this.state.list;
        listArray.push(input);
        var newItem = {
          text: listArray,
          key: Date.now()
        };

        this.setState(prevState => {
          return {
            list: prevState.list.concat(newItem)
          };
        });

        this.setState({
          list: listArray
        })


      }

      createList(list) {
        return <li>{list.text}</li>
      }

      render() {

        var entries = this.state.list
        var finalEntries = entries.props.map(this.createList)


        return (
          <div className="to-do-list-main">
            <input
              onChange={(e) => this.changeUserInput(e.target.value)}
              value={this.state.userInput}
              type="text"
            />
            <button onClick={() => this.addToList(this.state.userInput)}>Press me</button>
            <ul>
              {this.testingSetup()}
            </ul>
          </div>
        );
      }
    }

    export default TodoListt;

Answer 1

您可以使用传播运算符将其添加到现有阵列。只需在状态下向阵列中添加一个新对象，然后清除用户输入即可准备其他项。根据您的代码，这是一个添加到状态列表的简单示例（自己无法运行，因此只需检查语法错误等）即可：

import React from "react";
import "./App.css";
import { isTemplateElement } from "@babel/types";

class TodoList extends React.Component {
  state = {};

  constructor(props) {
    super(props);

    this.state = {
      userInput: "",
      list: [],
    };
  }

  changeUserInput(input) {
    this.setState({
      userInput: input
    })
  }


  addToList() {
    const { list, userInput } = this.state;
    // Add item to state list using spread operator and clear input
    this.setState({
      list: [...list, {text:userInput, key: Date.now()}],
      userInput: ""
    });
  }

  render() {
    return (
      <div className="to-do-list-main">
        <input
          onChange={(e) => this.changeUserInput(e.target.value)}
          value={this.state.userInput}
          type="text"
        />
        <button onClick={() => this.addToList()}>Press me</button>

        <hr/>

        {/* For each item in the list, render the contents */}
        {this.state.list.map(item => (
          <div key={item.key}>
            <h3>{item.text}</h3>
            <p>Time: {item.key}</p>
          </div>
        ))}

      </div>
    );
  }
}

export default TodoList;

React中的“无法读取未定义的属性'map'”，这是怎么回事？

1 个答案: