[英]what I didn't write here correctly?
我必須在 Redux-React 上創建一個應用程序。 但不幸的是我有錯誤:這些是主要的項目文件:<
看起來您的帖子主要是代碼; 請添加更多詳細信息。看起來您的帖子主要是代碼; 請添加更多詳細信息。看起來您的帖子主要是代碼; 請添加更多細節。
這些是主要的項目文件:
app.js(組件):
import React from 'react';
import { Component } from 'react';
import { connect } from 'react-redux'
import { fetchData } from '../actions';
import TableData from "./TableData";
import TableSearch from "./TableSearch";
export function searchFilter (search, data) {
return data.filter(n => n.term.toLowerCase().includes(search));
}
const days = ["23-08-2019", "24-08-2019", "25-08-2019"];
class Root extends React.Component {
componentDidMount() {
this.props.onFetchData(this.props.day);
}
render() {
const { search, shift, data, filteredData, onFilter, onSetSearch, onFetchData } = this.props;
return (
<div>
<TableSearch value={search}
onChange={(e) => onSetSearch(e.target.value)}
onSearch={() => onFilter()} />
{days.map((day, i) => (
<button key={day}
onClick={() => onFetchData(day)}
className={i === day ? "active" : ""}>{day}</button>
))}
<br />
{Object.keys(data).map(n => (
<button data-shift={n}
onClick={(e) => onFilter({ shift: e.target.dataset.shift })}
className={n === shift ? "active" : ""}>{n} shift</button>
))}
<TableData data={filteredData} />
</div>
);
}
}
export const ConnectedRoot = connect(
(state) => state,
(dispatch) => ({
onFilter: (args) => dispatch({ type: 'RUN_FILTER', ...args }),
onSetSearch: (search) => dispatch({ type: 'SET_SEARCH', search }),
onFetchData: (day) => dispatch(fetchData(day))
})
);
您在初始渲染時獲得未定義的數據,首先檢查數據是否可用,然后通過數據檢查 map:
data && Object.keys(data).map()
根據您的要求,您應該在 app.js 中使用 return 語句,例如:
return (
<div>
<TableSearch value={search}
onChange={(e) => onSetSearch(e.target.value)}
onSearch={() => onFilter()} />
{days && days.map((day, i) => (
<button key={day}
onClick={() => onFetchData(day)}
className={i === day ? "active" : ""}>{day}</button>
))}
<br />
{data && Object.keys(data).map(n => (
<button data-shift={n}
onClick={(e) => onFilter({ shift: e.target.dataset.shift })}
className={n === shift ? "active" : ""}>{n} shift</button>
))}
{data && <TableData data={filteredData} /> }
</div>
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.