如何像下面这样在 REACT table 上更新购物篮的数量？

Question

我一直在尝试但没有任何运气，我在 Update 方法中的实现没有更新产品的状态。请协助我做错了什么。我正在使用带挂钩的功能组件。

function MyTable() {
  const initState = [
    { id: 1, name: "bread", quantitiy: 50, location: "cupboard" },
    { id: 2, name: "milk", quantitiy: 20, location: "fridge" },
    { id: 3, name: "water", quantitiy: 10, location: "fridge" }
  ];
  const [state, setState] = React.useState(initState);

  const handleUpdateQuantity = (productId: any, value: any) => {
    let newData = data;
    var index: number = newData.findIndex(
      (product: any) => product.id === productId
    )

    if (index !== -1) {
      newData[index].quantity = value
      setData(newData)
    } else {
      console.log("Product not existing on table data...")
    }
  }

  return (
    <table>
      <tr key={"header"}>
        {Object.keys(state[0]).map((key) => (
          <th>{key}</th>
        ))}
      </tr>
      {state.map((item) => (
        <tr key={item.id}>
          <td>{item.name}</td>
          <td>{item.location}</td>
            <TextField
                type="number"
                defaultValue={1}
                onChange={(event) =>
                    handleUpdateQuantity(item.id, event.target.value)
                }
            />
          <td>{item.quantitiy}</td>
        </tr>
      ))}
    </table>
  );
}

ReactDOM.render(<MyTable />, document.getElementById("target"));

Answer 1

您可以使用功能更新（因为新状态取决于之前的状态）：

const handleUpdateQuantity = (productId: any, value: any) => {
    setData(prevData => prevData.map(el => {
        if(el.id === productId) {
            return {...el, quantity: value};
        }
        return el;
    }))
}

此外，quantitiys在初始状态中有错别字。

然后在 JSX 中，将值属性添加到文本字段：

<TextField
    type="number"
    defaultValue={1}
    value={item.quantity}
    onChange={(event) =>
        handleUpdateQuantity(item.id, event.target.value)
    }
/>

如何像下面这样在 REACT table 上更新购物篮的数量？

How to update quantity on basket on REACT table like below?

reactjs

react-hooks

react-table