Question

我尝试做的只是简单地从API中提取数据，然后列出数据并使用反应路径功能将表单字段更改为您正在更改的相关列表。

到目前为止，除了改变数据之外，我能够做到这一切，因为每次我这样做都会说状态没有定义。

组件位于下方，传递道具以在单击编辑时将输入值更改为相关列表。

请不要将我与表格文档联系起来我已经阅读了50次lol。

我试图改变数据时的错误信息未捕获的TypeError：无法读取属性＆＃39; setState＆＃39;未定义的

export default class List extends Component {

    constructor() {
        super();
        this.state = {
            announcements: []
        };
    }

    componentDidMount() {

        const fetchValues = {
            mode: 'cors',
            method: 'GET',
            credentials: 'include',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        }

        fetch('https://api.lonres.pde/workflow/announcement', fetchValues).then((response)=> {
            return response.json();
        }).then((response) => {
            this.setState({announcements: response})
        })

    }

    render() {
        const announcements = this.state.announcements;
        return (
            <Router>
                <section>
                    <ul>
                        {announcements.map(data => {
                            return <li onClick={ () => {}} key={data.announcement_id} className={data.is_active}>
                                <p>{data.announcement_id}</p>
                                <p>{data.description}</p>
                                <Link to={`/workflow_announcement/edit/${data.announcement_id}`}>
                                    <div>Edit</div>
                                </Link>
                            </li>
                        })}
                    </ul>
                    {announcements && (
                        <Route path='/workflow_announcement/edit/:announcementID' render={({ match }) => (
                            <Edit data={announcements.find(a => a.announcement_id == match.params.announcementID)}/>
                        )}/>
                    )}
                </section>
            </Router>
        );

    }
}



export default class Edit extends Component {

    /**
     * @constructor
     */

    constructor(props) {
        super(props);
        this.state = {
            data: props.data
        };
    }

    handleChange(event) {
        this.setState({data: event.target.value});
    }


    render() {
        const valid = function( current ){
            return current.day() !== 0 && current.day() !== 6;
        };
        console.log(this.state.data)
        return (
            <form>
                <div className="announcements">
                    <h4>{this.props.data.announcement_id}</h4>
                    <textarea cols="50" rows="5" value={this.props.data.description} onChange={this.handleChange}></textarea>
                    <section>
                        <h5>To:</h5>
                        <Datetime
                            value={this.props.data.start_datetime}
                            onChange={this.handleChange}
                            dateFormat="YYYY-MM-D"
                            timeFormat="HH:mm:ss"
                            isValidDate={ valid }
                        />
                        <h5>From:</h5>
                        <Datetime
                            value={this.props.data.end_datetime}
                            onChange={this.handleChange}
                            dateFormat="YYYY-MM-D"
                            timeFormat="HH:mm:ss"
                            isValidDate={ valid }
                        />
                    </section>
                    <input type="checkbox" checked={this.props.data.is_active} onChange={this.handleChange}  />
                    <button>ok</button>
                </div>
            </form>
        )
    }
}

Answer 1

constructor(props) {
        super(props);
        this.state = {value: ''};

        this.handleChange = this.handleChange.bind(this);
      }

handleChange(event) {
        this.setState({value: event.target.value});
      }

您需要bind(this)才能使其在回调中正常工作

还有另一种处理方法，你可以检查reactjs的文件。

https://facebook.github.io/react/docs/handling-events.html

React JS Crud使用可变数据进行问题

1 个答案: