Почему React возвращает «Object () не функция» при использовании помеченной библиотеки? - PullRequest
0 голосов
/ 08 мая 2019

Я делаю редактор уценки, используя Помеченную библиотеку, подобную этой <div id="preview" dangerouslySetInnerHTML={ {__html: marked('Rendered by **marked**.''></div>, но get TypeError: Object (...) не является функцией.

Нашли два соответствующих поста на SO; first и second Я использую тот же синтаксис, что и ответы, но получаю ошибку TypeError.В обоих постах они использовали метод ReactDOM.render () в конце.Полный код:

import React, { Component } from 'react';
import './App.css';
import { Provider, connect } from 'react-redux';
import { createStore } from'redux';
import { marked } from "marked";

// Redux
const ADD = "ADD";

const addText = (text) => {
  return {
  type: ADD,
  text: text
  }
};

const textReducer = (state = {text: ''}, action) => { 
  switch(action.type) {
    case ADD:
    return Object.assign({},state, { text: action.text })
    default:
    return state
  }
};

const store = createStore(textReducer);

// React
 class App extends Component {
  constructor(props){
    super(props)
    /*this.state = {
      input : ''
    }*/
  this.handleChange = this.handleChange.bind(this);

};

  handleChange(e){
    /*this.setState({
      input: e.target.value
    })*/

    this.props.addText(e.target.value)
  };

  render(){
    return(
      <div className="App-header">
       <textarea id="editor" value={this.props.text} onChange={this.handleChange}></textarea>
       <div id="preview" dangerouslySetInnerHTML={ {__html: marked('Rendered by **marked**.') } }></div>
      </div>
    )
  }
};


// React-Redux
const mapStateToProps = (state) => {
  return {
    text: state.text
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    addText: (text) => { 
      dispatch(addText(text))
    }
  }
};

const Container = connect(mapStateToProps, mapDispatchToProps)(App);

// eslint-disable-next-line
export default class AppWrapper extends Component {
  render() {
    return(
      <Provider store={store}>
        <Container />
      </Provider>
    );
  }
};

Предполагается, что текст уценки будет отображаться как HTML в элементе предварительного просмотра, но вместо этого я получаю TypeError: Object (...) не является функцией.

ОБНОВЛЕНИЕ: очевидноRedux не был настроен должным образом и был установлен в массив вместо объекта.Я исправил это, но я все еще получаю ту же ошибку.

1 Ответ

0 голосов
/ 17 мая 2019

Я нашел решение, проблема была в том, что я импортировал помеченный как названный import {import {marked} from 'marked' вместо импорта по умолчанию как этот import marked from 'marked'

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...