代码之家 › 专栏 › 技术社区 › zuZuu

React Redux-无法设置未定义的属性(设置“value”)

store state redux reactjs javascript

zuZuu · 技术社区 · 2 年前

我需要找到一种方法将我的数据从redux存储中获取到映射函数中,但最终出现以下错误

setVariants(editProduct?.variants?.map((variant) => variant));

这:

[
0:{label: 'Small', price: '5', value: 0}
1: {label: 'Medium', price: '7.5', value: 1}
2: {label: 'Large', price: '10', value: 2}
]

但这段代码最终没有定义

  const [variants, setVariants] = useState([
    { label: '', price: '', value: '' },
  ]);

  useEffect(() => {
    setVariants(editProduct?.variants?.map((variant) => variant));
  }, []);

  console.log(variants);

这就是为什么下面的代码结束为: 未捕获类型错误:无法设置未定义的属性(设置“value”)

 {variants.map((variant, index) => (
                      <div key={index} className=' mb-4'>
                        <div className='hidden'>{(variant.value = index)}</div>
                        <div>
                          <label className='block font-bold uppercase mb-2'>
                            <div className='flex'>
                              <div className='mr-2'>Variante {index + 1}</div>
                              <div className='flex justify-center items-center'>
                                <svg
                                  onClick={() => handleAddVariants()}
                                  xmlns='http://www.w3.org/2000/svg'
                                  class='h-5 w-5'
                                  viewBox='0 0 20 20'
                                  fill='currentColor'
                                >
                                  <path
                                    fill-rule='evenodd'
                                    d='M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z'
                                    clip-rule='evenodd'
                                  />
                                </svg>
                                <svg
                                  onClick={() => handleRemoveVariants(index)}
                                  xmlns='http://www.w3.org/2000/svg'
                                  class='h-5 w-5'
                                  viewBox='0 0 20 20'
                                  fill='currentColor'
                                >
                                  <path
                                    fill-rule='evenodd'
                                    d='M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z'
                                    clip-rule='evenodd'
                                  />
                                </svg>
                              </div>
                            </div>
                            <div className='flex'>
                              <input
                                className='mr-4 p-2 h-8 w-36 focus:outline-none bg-gray-700 border-b-2 border-yellow-500 font-semibold'
                                type='text'
                                name='label'
                                placeholder={'Name Variante ' + (index + 1)}
                                value={variant.label}
                                onChange={(event) =>
                                  handleVariantsChangeInput(index, event)
                                }
                              />

                              <input
                                className='h-8 w-16 p-2 focus:outline-none bg-gray-700 border-b-2 border-yellow-500 font-semibold'
                                type='number'
                                step='.01'
                                min='0'
                                name='price'
                                placeholder={'Preis ' + (index + 1)}
                                value={variant.price}
                                onChange={(event) =>
                                  handleVariantsChangeInput(index, event)
                                }
                              />
                              <div className='mt-1 font-semibold'>â¬</div>
                            </div>
                          </label>
                        </div>
                      </div>
                    ))}

const initialVariants = [{ label: '', price: '', value: '' }];

const EditProduct = () => {...}

  const [variants, setVariants] = useState(initialVariants);

  console.log(variants);
  console.log(initialVariants);

  useEffect(() => {
    setVariants(
      editProduct?.variants?.map(
        (variant, value) =>
          ({
            ...variant,
            value,
          } ?? initialVariants)
      )
    );
  }, [editProduct]); // don't forget dependencies

1 回复 | 直到 2 年前

Phil 2 年前

<div className='hidden'>{(variant.value = index)}</div>

我不知道这应该做什么,但如果你想分配一个 value

undefined

const initialVariants = [{ label: "", price: "", value: "" }];
const [variants, setVariants] = useState(initialVariants);

useEffect(() => {
  setVariants(
    editProduct?.variants?.map((variant, value) => ({
      ...variant,
      value,
    })) ?? initialVariants
  );
}, [editProduct]); // don't forget dependencies

价值 (索引)而不指定

{
  variants.map((variant) => (
    <div key={variant.value} className="mb-4">
      <div className="hidden">{variant.value}</div>
      {/* ... etc ... */}
    </div>
  ));
}