0 Câu hỏi: Tại sao React trả về đối tượng vách ngăn () không phải là một hàm do khi sử dụng thư viện được đánh dấu?

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Tìm thấy hai bài đăng có liên quan trên SO; đầu tiên thứ hai Tôi đang sử dụng cùng một cú pháp như các câu trả lời nhưng tôi nhận được TypeError. Trong cả hai bài viết, họ đã sử dụng phương thức ReactDOM.render (). Mã đầy đủ:

<div id="preview" dangerouslySetInnerHTML={ {__html: marked('Rendered by **marked**.''></div>

Văn bản đánh dấu giả sử được hiển thị dưới dạng html trong phần tử xem trước nhưng thay vào đó tôi nhận được TypeError: Object (...) không phải là một chức năng.

CẬP NHẬT: rõ ràng redux không được thiết lập đúng và được đặt thành một mảng thay vì đối tượng. Tôi đã sửa nó nhưng tôi vẫn nhận được lỗi tương tự.

    
0
  1. , trong trường hợp bạn muốn tự nhìn thấy lỗi.
    2019-05-15 15: 59: 01Z
0 Câu trả lời                              0                         
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>
    );
  }
};
nguồn đặt đây