使用随机数在 React 中呈现相应对象 ID 的数据

Question

我正在尝试创建一个 React 应用程序，您可以在其中按下一个按钮，它会为您提供约会之夜选项和相应的图像。我在 dates.js ex:

中创建了一小部分对象

export const dates = [
    {
        id: 0,
        name: "Comedy Club",
        image: "/assets/images/comic.jpg",   
    },
    {
        id: 1,
        name:"Piano Bar ",
        image: "/assets/images/piano-bar.jpg",
    },

然后我创建了一个 GetDates.js 来使用随机方法和相应的 onclick 事件。下面是我被困的地方。我已经根据以前的各种答案和 youtube 教程将此代码更改了 100 次，但我收到错误或者它们不是我要呈现的内容。您能否根据上次更新让我知道根据下面使用的 randomId 方法显示 dates.name 和 dates.image 需要什么？同样，我已经从我最初的尝试中改变了很多，我不确定这是最好的方法。任何建议将不胜感激！

class GetDates extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      image: "",
    };
  }

  randomSelect() {
    const randomId = dates[Math.floor(Math.random() * dates.length)].id;
    this.setState({ ...this.props.dates[randomId] });
  }

  render() {
    return (
      <div className="results-container">
        <button className="date-btn" onclick={this.randomSelect}>
          GET DATE IDEAS!
        </button>
      </div>
    );
  }
}

export default GetDates;

Answer 1

如果您在单击按钮时遇到错误，可能是因为 randomSelect 方法未绑定到 class。

尝试在您的构造函数中添加绑定调用，这样您将拥有：

constructor(props) {
    ...

    this.randomSelect = this.randomSelect.bind(this);
}

您可以在此处阅读更多相关信息：https://reactjs.org/docs/handling-events.html

Answer 2

该道具在 React 中称为 onClick，而不是 onclick（如 HTML 属性）。您还应该呈现当前选定的项目，而您目前没有。通常，您还应该使用功能组件而不是 class 组件。还要小心 this，因为它可能不是您认为的那样。当您使用数组函数 () => setCurDate() 时，您可以确保 this 被正确绑定。我建议您阅读 MDN docs for 'this' 以了解为什么会这样以及您可以采取哪些措施来防止它。

这里是解决上述所有问题的简单实现。

const dates = [
  {
    id: 0,
    name: "Comedy Club",
    image: "https://dummyimage.com/600x100/000/fff&text=Comedy+Club",
  },
  {
    id: 1,
    name: "Piano Bar ",
    image: "https://dummyimage.com/600x100/000/fff&text=Piano+Bar",
  },
];

function GetDates() {
  // state for the currently selected item
  const [curDate, setCurDate] = React.useState(randomSelect());

  function randomSelect() {
    // select one item at random (it is possible that the same image is selected more than once in a row)
    const selected = Math.floor(Math.random() * dates.length);
    return dates[selected];
  }

  return (
    <div className="results-container">
      {/* onClick update the state by creating a copy of the object to trigger a state update */}
      <button className="date-btn" onClick={() => setCurDate({...randomSelect()})}>
        GET DATE IDEAS!
      </button>
      {/* Render the currently selected item */}
      <h3>{curDate.name}</h3>
      <img src={curDate.image} />
    </div>
  );
}

ReactDOM.render(<GetDates />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>

使用随机数在 React 中呈现相应对象 ID 的数据

Use a random number to render that corresponding object ID's data in React

arrays

random

render

object

reactjs