如何在反应中将值设置为 const

Question

 const CreateNewTab = () => {
      const priceMap = {};
      retrun(
          <Form>
                 <Form.Item
                  label="Price Map"
                  name="priceMap"
                  rules={[{ required: true, message: "Please input Prices!"}]}>
                             
                              {selectedProducts.flatMap(productId => products
                                  .filter(product => product.id === productId)
                                  .map(product => (
                                      <Input.Group compact>
                                          <Form.Item label={product.productName + " : "} />   
                                          {product.priceList.map((priceObj) => (
                                              <Form.Item
                                                  label={priceObj.type}
                                                  key={priceObj.priceId}>
                                                  <Input defaultValue={priceObj.price}
                                                      rules={[{ required: true, message: "Please input price!" }]}
                                                      onChange={(changedValues) => { priceMap[priceObj.id] = changedValues[Object.keys(changedValues)[0]]; console.log(priceMap) }} />
                                                  </Form.Item>
                                             
                                          ))}
                                      </Input.Group>

                                  ))
                             )}
                                 
                </Form.Item>
           </Form>
)

I want to track the priceMap for example

 "priceMap": {
                "3": 2,
                "4": 5,
                "10": 2,
                "11": 5,
                "12": 2,
                "13": 5
            }

However, the error says Assignment to constant variable.

I have tried const [priceMap, setpriceMap] = useState([]); but it only sets single value to priceMap.

Instead, I want to create priceMap as key value json object.

Answer 1

setState is definitely the right thing to do. That is the React hooks way of having data that, when it changes, causes a re-render.

I have tried const [priceMap, setpriceMap] = useState([]); but it only sets single value to priceMap.

Why are you setting priceMap to an Array when you want it to be an Object ? Try something like this:

const CreateNewTab = () => {
  const [priceMap, setPriceMap] = useState({});
  return (
    <Form>
      <Form.Item
        label="Price Map"
        name="priceMap"
        rules={[{ required: true, message: "Please input Prices!"}]}
      >
        {selectedProducts.flatMap(productId => products
          .filter(product => product.id === productId)
          .map(product => (
            <Input.Group compact>
              <Form.Item label={product.productName + " : "} />   
              {product.priceList.map((priceObj) => (
                <Form.Item
                  label={priceObj.type}
                  key={priceObj.priceId}
                >
                  <Input
                    defaultValue={priceObj.price}
                    rules={[{ required: true, message: "Please input price!" }]}
                    onChange={(changedValues) => {
                      setPriceMap({
                        ...priceMap,
                        [priceObj.id]: changedValues[Object.keys(changedValues)[0]]
                      })
                    }} />
                </Form.Item>
              ))}
            </Input.Group>
          ))
        )}
      </Form.Item>
    </Form>
  );
};

Notice that when you call setPriceMap you pass a new object rather than mutating the object.

Answer 2

A constant is exactly what the name suggests. It will always be constant and immutable. If you change it to let priceMap = {}; you should be able to change its values