Блог

Работа с react и инструментарием redux.

У меня есть форма, которая позволяет пользователям создавать элементы. Запрос на публикацию должен соответствовать соответствующей схеме элементов мангуста.

Записи формы относятся к следующим значениям с сохранением состояния:

   const [name, setName] = useState('');
  const [imageURL, setImageURL] = useState('');
  const [brand, setBrand] = useState('');
  const [category, setCategory] = useState('');
  const [description, setDescription] = useState('');
  const [barcode, setBarcode] = useState('');
  const [countInStock, setCountInStock] = useState('');
  const [message] = useState(null);
  const [uploading, setUploading] = useState(false);
  const [uploadFile, setupLoadFile] = useState('');
 

Я не хочу, чтобы люди создавали свои собственные категории, поэтому у меня есть отдельная таблица категорий mongodb, которую я заполняю в форме, подобной этой

           <Form.Group controlId='category'>
            <Form.Label>Category</Form.Label>
            <Form.Control
              as='select'
              type='category'
              placeholder='enter Category'
              value={category}
              onChange={(e) => setCategory(e.target.value)}>
              {categories.map((category) => {
                return <option key={category._id}>{category.name}</option>;
              })}
            </Form.Control>
          </Form.Group>
 

Проблема в том, что при загрузке формы отображается опция первой категории по умолчанию, но эта опция не задана в качестве категории. Поэтому, если пользователь заполнит форму и не коснется раскрывающихся параметров категории и нажмет «Отправить», данные будут отправлены с категорией как неопределенные, даже если пользователю кажется, что была выбрана первая категория.

Я попытался решить эту проблему двумя способами:

1. Установите категорию триггера формы при загрузке с категорией, которая отображается по умолчанию (это не сработало).
2. получите имя первой категории и добавьте его в useState следующим образом:

   const categories = useSelector(getAllCategories);
  let firstCat = categories[0]; //this works
  let firstCatName = firstCat.name; //this fails
  const [category, setCategory] = useState(firstCatName)
 

Этот подход терпит неудачу, потому что по какой-то причине попытка получить имя первой категории вызывает ошибку «не удается найти имя свойства неопределенное», хотя объект есть, и я могу отобразить массив категорий в форме.

Есть идеи, что я здесь делаю не так?

От @Ajeet Shah

 useEffect(() => { 
if (categories.length > 0) { 
setCategory(categories[0].name) 
} }, [categories])
 

Я не понимал, что вы можете использовать useEffect дважды на одной странице, очевидно, вы можете!