Выбор случайного элемента из Javascript .filter () с помощью React и Mongoose

Question

Используя React и MongoDB / Mon goose, я пытаюсь выбрать случайный элемент из базы данных, который соответствует параметру true - в основном, пользователь нажимает кнопку, чтобы выбрать случайную беллетристику или запись научной литературы незамедлительный. Прямо сейчас, когда я console.log(fictionPrompts), ничего не возвращается, и отображается только часть загрузки из моей функции if. Я что-то упустил с моим .filter()? Это работало правильно, когда у меня была функция рандомизатора для получения любого запроса из базы данных, без попытки фильтрации для определенного типа c.

Из пн goose:

const promptSchema = new mongoose.Schema({
  isFiction: {
    type: Boolean,
    required: true
  },
...

Часть реактивного компонента:

const Prompts = props => {
  const [prompts, setPrompts] = useState([])
  const [currentPrompt, setCurrentPrompt] = useState({})

const getFictionPrompts = () => {
    axios(`${apiUrl}/prompts`)
      .then(res => setPrompts(res.data.prompts))
      .then(() => {
        props.alert({
          message: 'You\'ve received a prompt',
          variant: 'success'
        })
      })
      .catch(() => {
        props.alert({
          message: 'Something went wrong',
          variant: 'danger'
        })
      })

    const fictionPrompts = prompts.filter(prompt => (prompt.isFiction === true))
    const newPromptIndex = Math.floor(Math.random() * fictionPrompts.length)
    setCurrentPrompt(fictionPrompts[newPromptIndex])
  }

  let promptsJsx = ''
  if (!currentPrompt) {
    promptsJsx = 'Loading...'
  } else {
    promptsJsx = currentPrompt.text
  }

  return (
    <Layout>
      <button className='btn btn-primary prompt-button' onClick={getFictionPrompts}>Get A Fiction Prompt!</button>
      <button className='btn btn-primary prompt-button' onClick={getNonFictionPrompts}>Get A Non-Fiction Prompt!</button>
      <p>{promptsJsx}</p>
    </Layout>
  )
}

Answer 1

Причина, по которой у вас возникают проблемы, заключается в том, что axios все еще не вернул данные, когда вы пытаетесь установить currentPrompt.

Если вы обновите свой код до следующего, он должен работать :

const getFictionPrompts = () => {
    axios(`${apiUrl}/prompts`)
      .then(res => {
        setPrompts(res.data.prompts);
        // use the data here
        const fictionPrompts = res.data.prompts.filter(
          prompt => prompt.isFiction === true
        );
        const newPromptIndex = Math.floor(
          Math.random() * fictionPrompts.length
        );
        setCurrentPrompt(fictionPrompts[newPromptIndex]);
      })
      .then(() => {
        props.alert({
          message: "You've received a prompt",
          variant: "success"
        });
      })
      .catch(() => {
        props.alert({
          message: "Something went wrong",
          variant: "danger"
        });
      });
  };