显示投票数最多的数组

Question

我目前正在 FullStackOpen 上 Introduction to React 课程，但我被困在 1.14 anecdotes exercise，这要求应用程序显示得票最多的轶事。浏览器能够呈现 Mostvote Array，它呈现投票最多的轶事的投票，但投票最多的 (bestAnecdote) 无论我做什么都无法显示轶事。有谁知道我哪里做错了吗？提前谢谢你 :) 下面我附上了我的 React 代码：

import React, { useState } from 'react'

const Header = (props) => {
  return <h1>{props.contents}</h1>
}

const Button = (props) => (
  <button onClick={props.handleClick}>
    {props.text}
  </button>
) 

const Vote = ({vote}) => (
<p>has {vote} votes</p>
)

const App = () => {

  const contents = {
      text1: "Anecdote of the day",
      text2: "Anecdote with most votes"
  }

  const anecdotes = [
    'If it hurts, do it more often',
    'Adding manpower to a late software project makes it later!',
    'The first 90 percent of the code accounts for the first 10 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.',
    'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.',
    'Premature optimization is the root of all evil.',
    'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.',
    'Programming without an extremely heavy use of console.log is same as if a doctor would refuse to use x-rays or blood tests when diagnosing patients'
  ]

  const random = () => (
    Math.floor(Math.random() * 7)
  )

  const [selected, setSelected] = useState(0)
  const [vote, setVote] = useState(new Array(anecdotes.length).fill(0))

  const Anecdotevoting = () => {
    const copy = [...vote];
      copy[selected] += 1;
      setVote(copy);
  }
  
  const Mostvote = () => (
    <p>has {Math.max(...vote)} votes</p>
  )

  const bestAnecdote = anecdotes[vote.indexOf(Mostvote)];
  
  console.log(bestAnecdote)
  return (
    <div>
      <Header contents = {contents.text1}/>
      {anecdotes[selected]}<br/>
      <Vote vote = {vote[selected]}></Vote>
      <Button handleClick={Anecdotevoting} text = 'vote'/>
      <Button handleClick={() => setSelected(random)} text = 'next anecdote'/>
      <Header contents = {contents.text2}/>
      <bestAnecdote anecdotes = {anecdotes[vote.indexOf(Mostvote)]}/>
      <Mostvote vote = {Mostvote}/>
    </div>
  )
}

export default App

Answer 1

尼克遇到了大部分问题。这是一个工作版本，您可以使用它来查看问题出在哪里：

import React, { useState } from 'react'

const Header = (props) => {
  return <h1>{props.contents}</h1>
}

const Button = (props) => (
  <button onClick={props.handleClick}>
    {props.text}
  </button>
) 

const Vote = ({vote}) => (
<p>has {vote} votes</p>
)

const BestAnecdote = (props) => {
  return <h4>{props.anecdotes}</h4>
}

const App = () => {

  const contents = {
      text1: "Anecdote of the day",
      text2: "Anecdote with most votes"
  }

  const anecdotes = [
    'If it hurts, do it more often',
    'Adding manpower to a late software project makes it later!',
    'The first 90 percent of the code accounts for the first 10 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.',
    'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.',
    'Premature optimization is the root of all evil.',
    'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.',
    'Programming without an extremely heavy use of console.log is same as if a doctor would refuse to use x-rays or blood tests when diagnosing patients'
  ]

  const random = () => (
    Math.floor(Math.random() * 7)
  )

  const [selected, setSelected] = useState(0)
  const [vote, setVote] = useState(new Array(anecdotes.length).fill(0))

  const Anecdotevoting = () => {
    const copy = [...vote];
      copy[selected] += 1;
      setVote(copy);
  }
  
  const Mostvote = () => (
    <p>has {Math.max(...vote)} votes</p>
  )
  
  return (
    <div>
      <Header contents = {contents.text1}/>
      {anecdotes[selected]}<br/>
      <Vote vote = {vote[selected]}></Vote>
      <Button handleClick={Anecdotevoting} text = 'vote'/>
      <Button handleClick={() => setSelected(random)} text = 'next anecdote'/>
      <Header contents = {contents.text2}/>
      <BestAnecdote anecdotes = {anecdotes[vote.indexOf(Math.max(...vote))]}/>
      <Mostvote vote = {Mostvote}/>
    </div>
  )
}

export default App

Answer 2

问题

您正在用 copy[selected] += 1; 改变 Anecdotevoting 中的状态。即使您浅复制了 vote 状态，元素仍然引用原始元素。
MostVote 值为 JSX，因此 anecdotes[vote.indexOf(Mostvote)]; 将始终为 -1。

解决方案

更新 anecdoteVoting 处理程序以不改变状态。您可以将前一个状态映射到下一个状态，当映射索引与所选 return 匹配时，一个新值，否则 return 当前值。

const anecdoteVoting = () => {
  setVote((votes) => votes.map((vote, i) => vote + (i === selected ? 1 : 0)));
};

同时计算一个mostVotes和索引。

const { mostVotes, index } = vote.reduce(
  (mostVotes, curr, index) => {
    if (curr > mostVotes.mostVotes) {
      return { mostVotes: curr, index };
    }
    return mostVotes;
  },
  { mostVotes: Number.NEGATIVE_INFINITY, index: -1 }
);

...

<BestAnecdote anecdote={anecdotes[index]} />
<Vote vote={mostVotes} />

完整代码：

import React, { useState } from "react";

const Header = (props) => {
  return <h1>{props.contents}</h1>;
};

const Button = (props) => (
  <button onClick={props.handleClick}>{props.text}</button>
);

const Vote = ({ vote }) => <p>has {vote} votes</p>;

const BestAnecdote = ({ anecdote }) => <p>{anecdote}</p>;

const contents = {
  text1: "Anecdote of the day",
  text2: "Anecdote with most votes"
};

const anecdotes = [
  "If it hurts, do it more often",
  "Adding manpower to a late software project makes it later!",
  "The first 90 percent of the code accounts for the first 10 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.",
  "Any fool can write code that a computer can understand. Good programmers write code that humans can understand.",
  "Premature optimization is the root of all evil.",
  "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.",
  "Programming without an extremely heavy use of console.log is same as if a doctor would refuse to use x-rays or blood tests when diagnosing patients"
];

const random = () => Math.floor(Math.random() * anecdotes.length);

const App = () => {
  const [selected, setSelected] = useState(0);
  const [vote, setVote] = useState(new Array(anecdotes.length).fill(0));

  const anecdoteVoting = () => {
    setVote((votes) => votes.map((vote, i) => vote + (i === selected ? 1 : 0)));
  };

  const { mostVotes, index } = vote.reduce(
    (mostVotes, curr, index) => {
      if (curr > mostVotes.mostVotes) {
        return { mostVotes: curr, index };
      }
      return mostVotes;
    },
    { mostVotes: Number.NEGATIVE_INFINITY, index: -1 }
  );

  return (
    <div>
      <Header contents={contents.text1} />
      {anecdotes[selected]}
      <br />
      <Vote vote={vote[selected]}></Vote>
      <Button handleClick={anecdoteVoting} text="vote" />
      <Button handleClick={() => setSelected(random)} text="next anecdote" />
      <Header contents={contents.text2} />
      <BestAnecdote anecdote={anecdotes[index]} />
      <Vote vote={mostVotes} />
    </div>
  );
};

显示投票数最多的数组

display an array with the largest number of votes

javascript

arrays

indexof

reactjs

react-hooks

问题

解决方案