Вопросы Теги

Отображение HTML из функции map в функции визуализации контекста API React Context

Я использовал потоки, чтобы сделать Flash-экран в android. 

    import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;

public class HomeScreen extends AppCompatActivity{
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.screen_home);

        Thread thread = new Thread(){
            public void run(){
                try {
                    Thread.sleep(3 * 1000);
                    Intent i = new Intent(HomeScreen.this, MainActivity.class);
                    startActivity(i);
                } catch (InterruptedException e) {
                }
            }
        };
        thread.start();
    }
}
0
задан Timothy Wilburn 13 July 2018 в 18:14
поделиться

2 ответа

Вы ничего не возвращаете из обратного вызова Array.map(): 

{Object.keys(context.state.subjects).map(subject => {
    <li>{context.state.subjects[subject].title}</li>; <-- this is not returned
    console.log(context.state.subjects[subject].title);
 })}


const contextValue = { state: {"subjects":{"subject0":{"title":"Math","description":"","cards":{"card1":{"note":"","answer":""}}},"subject1":{"title":"history","description":"","cards":{"card1":{"note":"","answer":""}}}}}};


const MyContext = React.createContext();

const Example = () => (
  <MyContext.Consumer>
  {context => (
    <ul>
    {Object.keys(context.state.subjects).map(subject => {
      console.log(context.state.subjects[subject].title);
      return (
        <li key={subject}>{context.state.subjects[subject].title}</li>
      );
     })}
    </ul>
  )}
  </MyContext.Consumer>
);

const Demo = ({ value }) => (
  <MyContext.Provider value={value}>
    <Example />
  </MyContext.Provider>
);

ReactDOM.render(
  <Demo value={contextValue} />,
  demo
);
<script crossorigin src="https://unpkg.com/react@16.3/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16.3/umd/react-dom.development.js"></script>

<div id="demo">
  </demo>

0
ответ дан Ori Drori 17 August 2018 в 13:24
поделиться
  • 1
    неявный возврат или добавление "return & quot; ключевое слово ничего не меняет (я обновляю свой код, я неявно возвращаю & lt; li & gt; перед публикацией). – Timothy Wilburn 13 July 2018 в 17:30
  • 2
    при проверке страницы, & lt; MyContext.Consumer & gt; элемент вместе с & lt; ul & gt; внутри него визуализируется, но нет & lt; li & gt; – Timothy Wilburn 13 July 2018 в 17:31
  • 3
    Демонстрация работает, как вы можете видеть. Итак, найдите различия между демо и вашим кодом. – Ori Drori 13 July 2018 в 17:34
  • 4
    В тесте я получаю данные, которые я хочу отображать, если я пишу в потребительском компоненте: & lt; p & gt; {context.state.subjects.subject0.title} & lt; / p & gt; Renders & quot; Math & quot; на страницу – Timothy Wilburn 13 July 2018 в 17:36
  • 5
    – Timothy Wilburn 13 July 2018 в 18:13

Вы ничего не вернули изнутри функции карты и, следовательно, ничего не визуализировали. Либо вернуть его явно как 

<MyContext.Consumer>
    {context => (
        <ul>
            {Object.keys(context.state.subjects).map(subject => {
                return <li>{context.state.subjects[subject].title}</li>;
             })}
        </ul>
    )}
</MyContext.Consumer>

или неявно, как 

<MyContext.Consumer>
    {context => (
        <ul>
            {Object.keys(context.state.subjects).map(subject => (
                 <li>{context.state.subjects[subject].title}</li>;
            ))}
        </ul>
    )}
</MyContext.Consumer>
0
ответ дан Shubham Khatri 17 August 2018 в 13:24
поделиться
  • 1
    неявный возврат или добавление "return & quot; ключевое слово ничего не меняет (я обновляю свой код, я неявным образом возвращаю & lt; li & gt; перед публикацией. – Timothy Wilburn 13 July 2018 в 17:28
Другие вопросы по тегам:

Похожие вопросы: