如何将钩子导出到 react.js 中的其他函数？

Question

i am trying to export a hook {count, setCount} = useState(0) to another function to be able to get {count} value. My app is to make a simple inventory by adding items then when press submit button get a render of this inventory.

 import React, { useState } from "react"; import objects from "../list"; const List = function _List(item) { const [count, setCount] = useState(0); const increase = () => { return count < 10 ? setCount(count + 1) : 10; }; const decrease = () => { return count > 0 ? setCount(count - 1) : 0; }; return ( <div className="flex"> <h3>{item.name}</h3> <button type="submit" onClick={decrease}> - </button> <h3>{count}</h3> <button type="submit" onClick={increase}> + </button> </div> );}; function App() { const [message, setMessage] = useState("No Order Submited"); function displayOrder() { const orderList = setMessage(objects.map((x) => `${x.name} `)); // Would like to export {count} in const orderList return { orderList }; } return ( <div> <fieldset> <h1>Items:</h1> {objects.map(List)} </fieldset> <button type="submit" onClick={displayOrder}> Submit </button> <h2>{message}</h2> </div> ); } export default App;

Here is the objects list of my inventory:

 const objects = [ { id: 1, name: "item1", }, { id: 2, name: "item2", } ]; export default objects;

The best way would be to move my hook into the App function but the thing is increasing or decreasing {count} would affect all my items.

Is there anyway to render the {count} for each items when running the function displayOrder?

Thanks!

Answer 1

The main way you'd probably want to do it is by moving the state to the parent component. So something like this:

 const {useState} = React; const exampleObjects = [ {id: 1, name: "item1"}, {id: 2, name: "item2"} ]; // It makes react devs happy when you avoid mutating state. const update = (arr, i, newVal) => [ ...arr.slice(0,i), newVal, ...arr.slice(i+1) ]; function List({name, count, setCount}) { const increase = () => { return count < 10 ? setCount(count + 1) : 10; }; const decrease = () => { return count > 0 ? setCount(count - 1) : 0; }; return ( <div className="flex"> <h3>{name}</h3> <button type="submit" onClick={decrease}> - </button> <h3>{count}</h3> <button type="submit" onClick={increase}> + </button> </div> ); } function App({objects}) { // I would actually recommend you make counts an object, but I figured I'd leave the .reduce fun as an exercise for you. // Note this also gets rid of the update function silliness, allowing you to do something like {...oldObj, [id]: newVal} instead. const [counts, setCounts] = useState(objects.map(_ => 0)); const [order, setOrder] = useState(null); const setCount = (i) => (newVal) => { setCounts(cs => update(cs,i,newVal)); }; const submitOrder = () => { setOrder(objects.map((o,i) => ({...o, count: counts[i]}))); }; return ( <div> <fieldset> <h1>Items:</h1> {objects.map((o, i) => (<List key={o.id} {...o} count={counts[i]} setCount={setCount(i)} />))} </fieldset> <button type="submit" onClick={submitOrder}> Submit </button> <h2>Orders</h2> {!order ? "No order submitted" : order.map(({id, name, count}) => ( <div key={id}> {name}: {count} </div> ))} </div> ); } // Render it ReactDOM.render( <App objects={exampleObjects} />, document.getElementById("react") );

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