Javascript 我试图回答这个问题，但州政府给了我问题

您有一个GroceryApp组件，它接收产品列表，每个产品都有名称和投票。应用程序应该呈现一个无序列表，每个产品都有一个列表项。产品可以是上选或下选

通过适当地使用React state和props，实现向上投票/向下投票逻辑。将状态保留在最顶层组件中，而产品组件应接受道具

const Product = props => {
  const {name,votes} = props.product
      
  const plus = () => {
    // Call props.onVote to increase the vote count for this product
    props.onVote(1,props.index);
  };
  const minus = () => {
    // Call props.onVote to decrease the vote count for this product
    props.onVote(-1,props.index);
  };
  return (
    <li>
      <span>{name}</span> - <span>votes: {votes}</span>
      <button onClick={plus}>+</button>{" "}
      <button onClick={minus}>-</button>
    </li>
  );
};

const GroceryApp = (props) => {
  var [products, setProducts] = React.useState(props.products);
      
  const onVote = (dir, index) => {};
      
  return (
    <ul>
      {products.map((product,index) => (
         <Product product={product} index={index} onVote={onVote} />
      ))}
      {/* Render an array of products, which should call onVote when + or - is clicked */}
    </ul>
  );
}

document.body.innerHTML = "<div id='root'></div>";

ReactDOM.render(
  <GroceryApp
    products={[
      { name: "Oranges", votes: 0 },
      { name: "Bananas", votes: 0 }
    ]}
  />, document.getElementById('root')
);


let plusButton = document.querySelector("ul > li > button");
if (plusButton) {
  plusButton.click();
}
console.log(document.getElementById('root').outerHTML)

const Product=props=>{
const{name，voces}=props.product
常量加号=（）=>{
//调用props.onVote以增加此产品的投票计数
props.onVote（1，props.index）；
};
常数负=（）=>{
//调用props.onVote以减少此产品的投票计数
支持投票（-1，支持指数）；
};
返回(

{name}-投票：{vows}
+{" "}
-

);
};
const GroceryApp=（道具）=>{
var[products，setProducts]=React.useState（props.products）；
const onVote=（dir，index）=>{}；
返回(

{products.map（（产品，索引）=>(
))}
{/*呈现产品数组，单击+或-时应调用onVote*/}

);
}
document.body.innerHTML=“”；
ReactDOM.render(
，document.getElementById（'root'））
);
让plusButton=document.querySelector（“ul>li>按钮”）；
if（加钮）{
plusButton.click（）；
}
log（document.getElementById（'root'）.outerHTML）

您可以在渲染过程中更新产品并对其进行排序（如果列表非常大，则成本可能会很高）

const GroceryApp=（道具）=>{
const[products，setProducts]=React.useState（props.products）；
const onVote=（目录，索引）=>{
const nextProducts=[…产品]；
常数产品=产品[指数]；
nextProducts[index]={…产品，投票：product.vows+dir}；
setProducts（下一个产品）
};
返回(

{产品
.sort（（a，b）=>b.投票-a.投票）//降序排序
.map（（产品、索引）=>(
))
}

);
}

非常感谢您，我无法给您打分，因为我没有jejeje，但我真的非常感谢您

const GroceryApp = (props) => {
  const [products, setProducts] = React.useState(props.products);
  
  const onVote = (dir, index) => {
    const nextProducts = [...products];
    const product = products[index];
    nextProducts[index] = { ...product, votes: product.votes + dir };
    setProducts(nextProducts)
  };
  
  return (
    <ul>
      {products
        .sort((a, b) => b.votes - a.votes) // descending sort
        .map((product,index) => (
          <Product product={product} index={index} onVote={onVote} />
        ))
      }
    </ul>
  );
}