小编Mwa*_*ovi的帖子

我正在尝试在 中创建一个动态按钮react-admin。
对于每个按钮，它都会点击一个唯一的地址，我该怎么做？

不幸的是，我有这个错误：props.username is undefined。

export const LoginCredentialList = (props) => (
  <List {...props} pagination={<PostPagination/>}>
    <Datagrid>
       <TextField label="Username" source="username" />
       <Button label="Re-invoke Login"
          onClick={() => {       
            axios.get("http://localhost:8080/admin/" + somehow_read_username_here)
                 .then((res)=>console.log(res));
             }}
        />
    </Datagrid>
  </List>
);

这是parent调用或使用上述组件的地方：

class SPanel extends React.Component {
  render() {
    return (
      <div>
        <Admin dataProvider={restDataProvider}>
          <Resource name="loginCredential" list={LoginCredentialList} />
            ...

只是对 React 的生命周期有点困惑。这是我的理解...

该render()总是先运行，对不对？如果是这样......
这意味着setState()内部useEffect()只在初始之后运行，对render()吗？

问题：
当上面发生时，整个组件是否重新渲染？
所以这将是组件第二次渲染只是为了加载state.
那不会是性能问题吗？

我有一个src/reducers/index.tsx文件，我在其中输出所有减速器：

import counterReducer from '../reducers/counter';
import loggedReducer from '../reducers/isLogged';
import {combineReducers} from 'redux';

const allReducers = combineReducers({
   counter: counterReducer,
   isLogged: loggedReducer,
});

export default allReducers;

然后在我的src/index.tsx：

import {Provider} from 'react-redux';

const store = createStore(allReducers);

ReactDOM.render(
   <React.Fragment>
      <Provider store={store}>
        <App />
      </Provider>,
   document.getElementById('root'),
);

最后在我的src/app.tsx我有：

import {useSelector} from 'react-redux';

const App = () => {
   const counter = useSelector(state => state.counter);
   return (
      <h1>counter {counter}</h1>
   );
};

错误是报告在的state.counter部分useSelector：

> Property 'counter' …

我正在尝试使用 Jest 为我的reactjs项目进行单元测试。

当我想测试组件的渲染时，出现以下错误：

SyntaxError: /Users/jk/EpitechProjects/T-WEB-700/CountOfMoney_18/front/src/tests/components/Navbar.test.js: 
Support for the experimental syntax 'jsx' isn't currently enabled (9:29):

       7 | 
       8 | test('Navbar : should render navbar', ()=>{
    >  9 |     const wrapper = shallow(<Navbar />);
         |                             ^
      10 |     expect(wrapper.find('nav').length).toBe(1);

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of
your Babel config to enable transformation. If you want to leave it as-is,
add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to 
enable parsing.

但是，它似乎无法识别JSX语法。
我已经尝试了两者@babel/preset-react和@babel/plugin-syntax-jsx建议，但仍然存在相同的错误。 …

在 my 中App，我们有基于角色的permissions喜欢ADD/DELETE。

• Admin拥有add, delete,edit的所有权限records
• customers没有delete权限。

因此，我想隐藏delete 复选框内的<Datagrid>客户。

//RoleList.js

import React from "react";
import { List, Datagrid, TextField, SingleFieldList, ChipField, EditButton, DeleteButton, ReferenceArrayField, Loading } from "react-admin";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  chips: {
    backgroundColor: theme.palette.secondary.light
  }
}));

const RoleList = ({ permissions, ...props }) => {
  const classes = useStyles();

  if (!permissions) …