Question

我的代码工作正常，可以显示一条记录。

scheduled_event = None
def on_touch_down(self, touch):
    if self.scheduled_event is not None:
            self.scheduled_event.cancel()
            self.scheduled_event = None
    if touch.is_double_tap:
            do_your_double_tap_thing()
    else:
        double_tap_wait_s = 1
        self.scheduled_event = Clock.schedule_once(do_your_single_tap_thing, double_tap_wait_s)

如何将数据显示到表中以及如何进行编辑。我还希望能够编辑所有字段。任何帮助将不胜感激。

Answer 1

我在这里做了三处更改。一处于状态，二处于体内。我也将您的问题更新为正确的格式。

也：将react更改为React！

import React from "react";

export default class App extends React.Component {
  state = {
    loading: true,
    person: []        /* 1. Changed it as an array. */
  };

  async componentDidMount() {
    const url = "https://api.jsonbin.io/b/5e9ef690435f5604bb4567dd";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({ person: [...data], loading: false });
    console.log(data[0]);
  }

  render() {
    return (
      <div>
        {/* 2. Change the condition for loading here... */}
        {this.state.loading || this.state.person.length === 0 ? (
          <div>loading...</div>
        ) : (
          <>
            {/* 3. Change the things here in tabular form. */}
            <table>
              <tr>
                <th>title</th>
                <th>firstName</th>
                <th>lastName</th>
                <th>dob</th>
              </tr>
              <tbody>
                {this.state.person.map((person, key) => (
                  <tr key={key}>
                    <td>{person.title}</td>
                    <td>{person.firstName}</td>
                    <td>{person.lastName}</td>
                    <td>{person.dob}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </>
        )}
      </div>
    );
  }
}

有效代码段： https://codesandbox.io/s/charming-diffie-989pr

演示：https://989pr.csb.app/

预览：

堆栈代码段

我做了很多更改，使其可以在Stack Snippet上运行。但是请参考上面的代码沙箱链接。

class App extends React.Component {
  state = {
    loading: true,
    person: [] /* 1. Changed it as an array. */
  };

  componentDidMount() {
    const url = "https://api.jsonbin.io/b/5e9ef690435f5604bb4567dd";
    fetch(url).then(res => res.json()).then(data => this.setState({ person: [...data], loading: false }));
  }

  render() {
    return (
      <div>
        {/* 2. Change the condition for loading here... */}
        {this.state.loading || this.state.person.length === 0 ? (
          <div>loading...</div>
        ) : (
          <div>
            {/* 3. Change the things here in tabular form. */}
            <table border="1" cellPadding="5">
              <tr>
                <th>title</th>
                <th>firstName</th>
                <th>lastName</th>
                <th>dob</th>
              </tr>
              <tbody>
                {this.state.person.map((person, key) => (
                  <tr key={key}>
                    <td>{person.title}</td>
                    <td>{person.firstName}</td>
                    <td>{person.lastName}</td>
                    <td>{person.dob}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

需要帮助显示表

1 个答案: