Функция array.find () для URL рендера `$ {item}` реагирует на родной не работающий - PullRequest
0 голосов
/ 29 октября 2019

Я пытаюсь использовать определенное значение (видео) из массива, чтобы отобразить его в URL-адресе, подобном этому ${video_id}.

Проблема в том, что оно не получит значение из видео. Я использую var video_id и устанавливаю его в значение видео из массива.

Я попробовал функцию поиска и установил его в переменную. Есть ли другой способ, который работает?

Пример массива:

[
    {
        "title": "Task2",
        "description": "Description task 2 goes here",
        "video": "L-YWx_x6ksI",
        "done": false,
        "steps": [

        ],
        "id": 2
    }
]

DailyTask.js

class DailyTaskScreen extends Component {

  constructor() {
    super();
    this.state = {
      show: true,
      appState: AppState.currentState,
      taskDone: false,
      task: [],
      steps: [],
    };
  }

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
    fetch('https://api.taskoftheday.com/daily-ecommerce/', {
      method: 'GET',
      headers: {
        'Authorization': `Token xxxxxx`
      }
    })
    .then( res => res.json())
    .then( jsonRes => this.setState({ task: jsonRes }) )
    .then(console.log(this.state.task))
    .catch( error => console.log(error))

    fetch(`https://api.taskoftheday.com/step/?task_id=${this.state.task}`, {
      method: 'GET',
      headers: {
        'Authorization': `Token xxxxxx`
      }
    })
    .then( res => res.json())
    .then( jsonRes => this.setState({ steps: jsonRes }) )
    .then(console.log(this.state.steps))
    .catch( error => console.log(error))
  }

 render() {

 var video_id = this.state.task.find(function(video) {
      return video;
    });

    return (
      <>
        <View style={{ width: '100%', height: 300 }} >
          <>
            <TouchableWithoutFeedback onPress={this.ShowHideComponent}>{
              this.state.appState == 'active' &&
              <WebView
                javaScriptEnabled={true}
                useWebKit={true}
                domStorageEnabled={true}
                allowsInlineMediaPlayback={true}
                source={{ uri: `https://www.youtube.com/embed/${video_id}?playsinline=1&fs=1&modestbranding=0&rel=0&` }}
              />
            }
            </TouchableWithoutFeedback>
      </>
    );

  }

}

Я хочу отобразитьзначение видео из массива в URL-адресе YouTube.

1 Ответ

0 голосов
/ 29 октября 2019

Взгляните на array.find описание. Он работает, выполняя функцию обратного вызова (ту, которую вы передаете в качестве аргумента) для каждого элемента массива, и первым элементом, возвращающим истинное значение, является результат .find. Он используется для поиска элементов внутри массива, и это не то, что вам нужно

Поскольку ваш state.steps является массивом объектов формы {title: '...', description: '...', ...}, вы хотите взять первый элемент массива, а затем video свойство этого предмета

const video_id = this.state.task[0].video
...